@bigbinary/neeto-payments-frontend 2.2.0 → 2.2.2

package/dist/cjs/Dashboard.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var _extends = require('./extends-1b35a664.js');
-var React$1 = require('react');
+var defineProperty = require('./defineProperty-f3094d6c.js');
+var slicedToArray = require('./slicedToArray-f320d9e7.js');
+var React = require('react');
 var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -11,24 +12,27 @@ var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
-var renderFunctions = require('./renderFunctions-621282bb.js');
-var index = require('./index-b7badf96.js');
-var ExportModal = require('./ExportModal-b94a33bf.js');
+var renderFunctions = require('./renderFunctions-0284d0cb.js');
+var index = require('./index-1ce7ebb8.js');
+var ExportModal = require('./ExportModal-730a91b8.js');
+var toConsumableArray = require('./toConsumableArray-9abb3858.js');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var constants = require('./constants.js');
-var index$1 = require('./index-e317e851.js');
+var index$1 = require('./index-8a575dd1.js');
 var constants$1 = require('@bigbinary/neeto-commons-frontend/constants');
 var Columns = require('@bigbinary/neeto-molecules/Columns');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var Table = require('@bigbinary/neetoui/Table');
 var NoData = require('@bigbinary/neetoui/NoData');
-var useConnectApi = require('./useConnectApi-a80cbf88.js');
-var usePlatformApi = require('./usePlatformApi-6740cf80.js');
+var useConnectApi = require('./useConnectApi-67c912ae.js');
+var usePlatformApi = require('./usePlatformApi-365cf2dc.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Down = require('@bigbinary/neeto-icons/Down');
 var Right = require('@bigbinary/neeto-icons/Right');
+var objectWithoutProperties = require('./objectWithoutProperties-2fed2d7d.js');
 var Pane = require('@bigbinary/neetoui/Pane');
 require('@tanstack/react-query');
 require('@tanstack/react-query-devtools');
@@ -36,14 +40,16 @@ require('@bigbinary/neeto-molecules/DateFormat');
 require('@bigbinary/neetoui/Button');
 require('@bigbinary/neetoui/Tag');
 require('@bigbinary/neetoui/Tooltip');
+require('./CopyButtonWrapper-57331e1c.js');
 require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 require('@bigbinary/neeto-icons/Download');
 require('@bigbinary/neetoui/Modal');
 require('axios');
-require('./exportChannel-1c3103ef.js');
-require('./IdentifierButton-c5f8ded9.js');
+require('./exportChannel-2d528a51.js');
+require('./IdentifierButton-3162ff10.js');
+require('./_commonjsHelpers-755157d3.js');
 require('util');
-require('./queryConstants-45f84f3e.js');
+require('./queryConstants-cb79f600.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,83 +65,107 @@ var Down__default = /*#__PURE__*/_interopDefaultLegacy(Down);
 var Right__default = /*#__PURE__*/_interopDefaultLegacy(Right);
 var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 
-const useFiltersAndPagination = _ref => {
-  let {
-    payableEntityColumns,
-    kind,
-    searchProps
-  } = _ref;
-  const {
-    tab = index.TAB.all
-  } = reactUtils.useQueryParams();
-  const history = reactRouterDom.useHistory();
-  const tabs = index.TABS.filter(tab => !index.TAB_METADATA[tab]?.isHidden?.[kind]);
-  const [isFilterButtonVisible, setIsFilterButtonVisible] = React$1.useState(false);
-  const [isFilterPaneOpen, setIsFilterPaneOpen] = React$1.useState(false);
-  const [pageProperties, setPageProperties] = React$1.useState(renderFunctions.buildDefaultPageProperties(tabs));
-  const [sortProperties, setSortProperties] = React$1.useState(constants.DEFAULT_SORT_PROPERTIES);
-  const filterableColumns = ExportModal.buildFilterColumns(tab, kind, payableEntityColumns);
-  const {
-    searchTerm = ""
-  } = utils.getQueryParams();
-  const searchKeywordProps = {
-    ...ExportModal.modifySearchProps({
-      searchProps,
-      kind
-    }),
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
+  var payableEntityColumns = _ref.payableEntityColumns,
+    kind = _ref.kind,
+    searchProps = _ref.searchProps;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$tab = _useQueryParams.tab,
+    tab = _useQueryParams$tab === void 0 ? index.TAB.all : _useQueryParams$tab;
+  var history = reactRouterDom.useHistory();
+  var tabs = index.TABS.filter(function (tab) {
+    var _TAB_METADATA$tab;
+    return !((_TAB_METADATA$tab = index.TAB_METADATA[tab]) !== null && _TAB_METADATA$tab !== void 0 && (_TAB_METADATA$tab = _TAB_METADATA$tab.isHidden) !== null && _TAB_METADATA$tab !== void 0 && _TAB_METADATA$tab[kind]);
+  });
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isFilterButtonVisible = _useState2[0],
+    setIsFilterButtonVisible = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    isFilterPaneOpen = _useState4[0],
+    setIsFilterPaneOpen = _useState4[1];
+  var _useState5 = React.useState(renderFunctions.buildDefaultPageProperties(tabs)),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+    pageProperties = _useState6[0],
+    setPageProperties = _useState6[1];
+  var _useState7 = React.useState(constants.DEFAULT_SORT_PROPERTIES),
+    _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+    sortProperties = _useState8[0],
+    setSortProperties = _useState8[1];
+  var filterableColumns = ExportModal.buildFilterColumns(tab, kind, payableEntityColumns);
+  var _getQueryParams = utils.getQueryParams(),
+    _getQueryParams$searc = _getQueryParams.searchTerm,
+    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
+  var searchKeywordProps = _objectSpread$4(_objectSpread$4({}, ExportModal.modifySearchProps({
+    searchProps: searchProps,
+    kind: kind
+  })), {}, {
     key: "search_term",
     value: searchTerm.trim()
-  };
-  const [filters, setFilters] = React$1.useState(neetoFiltersFrontend.buildFiltersFromURL([...filterableColumns, searchKeywordProps]));
-  const [dataSize, setDataSize] = React$1.useState(null);
-  const [paneStatus, setPaneStatus] = React$1.useState(index.INITIAL_PANE_STATUS);
-  const columns = ExportModal.buildPaymentColumns({
-    tab,
-    kind,
-    payableEntityColumns,
+  });
+  var _useState9 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(toConsumableArray._toConsumableArray(filterableColumns), [searchKeywordProps]))),
+    _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+    filters = _useState10[0],
+    setFilters = _useState10[1];
+  var _useState11 = React.useState(null),
+    _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+    dataSize = _useState12[0],
+    setDataSize = _useState12[1];
+  var _useState13 = React.useState(index.INITIAL_PANE_STATUS),
+    _useState14 = slicedToArray._slicedToArray(_useState13, 2),
+    paneStatus = _useState14[0],
+    setPaneStatus = _useState14[1];
+  var columns = ExportModal.buildPaymentColumns({
+    tab: tab,
+    kind: kind,
+    payableEntityColumns: payableEntityColumns,
     specialColumnArguments: {
-      setPaneStatus
+      setPaneStatus: setPaneStatus
     }
   });
-  const modifiedColumns = columns.map(ramda.modify("dataIndex", index$1.processDataIndex));
-  const handleTabChange = tab => {
+  var modifiedColumns = columns.map(ramda.modify("dataIndex", index$1.processDataIndex));
+  var handleTabChange = function handleTabChange(tab) {
+    var _pageProperties$tab, _pageProperties$tab2;
     setDataSize(null);
-    const queryParams = utils.getQueryParams({
+    var queryParams = utils.getQueryParams({
       toCamelCase: false
     });
-    const newParams = {
-      tab,
-      page: pageProperties[tab]?.page,
-      page_size: pageProperties[tab]?.pageSize
+    var newParams = {
+      tab: tab,
+      page: (_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page,
+      page_size: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize
     };
     history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft(newParams, queryParams)));
   };
   return {
-    isFilterButtonVisible,
-    isFilterPaneOpen,
-    pageProperties,
-    paneStatus,
-    filters,
-    searchKeywordProps,
-    tabs,
-    tab,
-    dataSize,
-    filterableColumns,
-    sortProperties,
-    columns,
-    modifiedColumns,
-    setIsFilterButtonVisible,
-    setIsFilterPaneOpen,
-    setPageProperties,
-    setPaneStatus,
-    setFilters,
-    handleTabChange,
-    setDataSize,
-    setSortProperties
+    isFilterButtonVisible: isFilterButtonVisible,
+    isFilterPaneOpen: isFilterPaneOpen,
+    pageProperties: pageProperties,
+    paneStatus: paneStatus,
+    filters: filters,
+    searchKeywordProps: searchKeywordProps,
+    tabs: tabs,
+    tab: tab,
+    dataSize: dataSize,
+    filterableColumns: filterableColumns,
+    sortProperties: sortProperties,
+    columns: columns,
+    modifiedColumns: modifiedColumns,
+    setIsFilterButtonVisible: setIsFilterButtonVisible,
+    setIsFilterPaneOpen: setIsFilterPaneOpen,
+    setPageProperties: setPageProperties,
+    setPaneStatus: setPaneStatus,
+    setFilters: setFilters,
+    handleTabChange: handleTabChange,
+    setDataSize: setDataSize,
+    setSortProperties: setSortProperties
   };
 };
 
-const SPLIT_COLUMNS = [{
+var SPLIT_COLUMNS = [{
   key: "splitSubId",
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
@@ -158,7 +188,7 @@ const SPLIT_COLUMNS = [{
   width: "130px",
   render: renderFunctions.renderStatus("split")
 }];
-const REFUND_COLUMNS = [{
+var REFUND_COLUMNS = [{
   key: "refundId",
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
@@ -182,66 +212,75 @@ const REFUND_COLUMNS = [{
   render: renderFunctions.renderStatus("refund")
 }];
 
-const SubTable = _ref => {
-  let {
-    data = [],
-    className = "",
-    kind = "split"
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: className || "ml-12 max-w-3xl"
-  }, /*#__PURE__*/React.createElement(TableWrapper__default["default"], {
-    hasPagination: false
-  }, /*#__PURE__*/React.createElement(Table__default["default"], {
-    fixedHeight: true,
-    columnData: ExportModal.isSplitKind(kind) ? SPLIT_COLUMNS : REFUND_COLUMNS,
-    pagination: false,
-    rowData: renderFunctions.buildRowData({
-      data
-    }),
-    scroll: {
-      y: 300
-    }
-  })));
+var SubTable = function SubTable(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? "split" : _ref$kind;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: className || "ml-12 max-w-3xl",
+    children: /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+      hasPagination: false,
+      children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+        fixedHeight: true,
+        columnData: ExportModal.isSplitKind(kind) ? SPLIT_COLUMNS : REFUND_COLUMNS,
+        pagination: false,
+        rowData: renderFunctions.buildRowData({
+          data: data
+        }),
+        scroll: {
+          y: 300
+        }
+      })
+    })
+  });
 };
 
-const ExpandedRow = function () {
-  let {
-    splits = [],
-    refunds = []
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: "my-2 space-y-2"
-  }, !ramda.isEmpty(splits) && /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "ml-12",
-    style: "h3"
-  }, i18next.t("neetoPayments.common.splits")), /*#__PURE__*/React.createElement(SubTable, {
-    data: splits
-  })), !ramda.isEmpty(refunds) && /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "ml-12",
-    style: "h3"
-  }, i18next.t("neetoPayments.title.refund")), /*#__PURE__*/React.createElement(SubTable, {
-    data: refunds,
-    kind: "refund"
-  })));
+var ExpandedRow = function ExpandedRow() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$splits = _ref.splits,
+    splits = _ref$splits === void 0 ? [] : _ref$splits,
+    _ref$refunds = _ref.refunds,
+    refunds = _ref$refunds === void 0 ? [] : _ref$refunds;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "my-2 space-y-2",
+    children: [!ramda.isEmpty(splits) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "ml-12",
+        style: "h3",
+        children: i18next.t("neetoPayments.common.splits")
+      }), /*#__PURE__*/jsxRuntime.jsx(SubTable, {
+        data: splits
+      })]
+    }), !ramda.isEmpty(refunds) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-4",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "ml-12",
+        style: "h3",
+        children: i18next.t("neetoPayments.title.refund")
+      }), /*#__PURE__*/jsxRuntime.jsx(SubTable, {
+        data: refunds,
+        kind: "refund"
+      })]
+    })]
+  });
 };
 
-const useFetchData = _ref => {
-  let {
-    kind,
-    holdableId,
-    payload,
-    isPlatformEnabled
-  } = _ref;
-  const data = {};
-  data.transfer = data.connected = useConnectApi.useFetchStripeTransactions(holdableId, {
-    ...payload,
-    kind
-  }, {
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchData = function useFetchData(_ref) {
+  var _data$kind, _data$kind2, _data$kind3, _data$kind4;
+  var kind = _ref.kind,
+    holdableId = _ref.holdableId,
+    payload = _ref.payload,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var data = {};
+  data.transfer = data.connected = useConnectApi.useFetchStripeTransactions(holdableId, _objectSpread$3(_objectSpread$3({}, payload), {}, {
+    kind: kind
+  }), {
     enabled: ExportModal.isTransferKind(kind) || ExportModal.isConnectedKind(kind)
   });
   data.refund = usePlatformApi.useFetchStripeRefunds(payload, {
@@ -254,359 +293,412 @@ const useFetchData = _ref => {
     enabled: ExportModal.isSplitKind(kind)
   });
   return {
-    data: ExportModal.processResponse(data[kind]?.data, kind),
-    dataSize: data[kind]?.data?.counts?.[payload?.tab],
-    isDataLoading: data[kind]?.isLoading,
-    isDataFetching: data[kind]?.isFetching
+    data: ExportModal.processResponse((_data$kind = data[kind]) === null || _data$kind === void 0 ? void 0 : _data$kind.data, kind),
+    dataSize: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.counts) === null || _data$kind2 === void 0 ? void 0 : _data$kind2[payload === null || payload === void 0 ? void 0 : payload.tab],
+    isDataLoading: (_data$kind3 = data[kind]) === null || _data$kind3 === void 0 ? void 0 : _data$kind3.isLoading,
+    isDataFetching: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isFetching
   };
 };
 
-const RowExpander = _ref => {
-  let {
-    expanded,
-    onExpand,
-    record,
-    expandable
-  } = _ref;
-  return expandable && (expanded ? /*#__PURE__*/React.createElement(Down__default["default"], {
+var RowExpander = function RowExpander(_ref) {
+  var expanded = _ref.expanded,
+    onExpand = _ref.onExpand,
+    record = _ref.record,
+    expandable = _ref.expandable;
+  return expandable && (expanded ? /*#__PURE__*/jsxRuntime.jsx(Down__default["default"], {
     className: "cursor-pointer",
-    onClick: e => onExpand(record, e)
-  }) : /*#__PURE__*/React.createElement(Right__default["default"], {
+    onClick: function onClick(e) {
+      return onExpand(record, e);
+    }
+  }) : /*#__PURE__*/jsxRuntime.jsx(Right__default["default"], {
     className: "cursor-pointer",
-    onClick: e => onExpand(record, e)
+    onClick: function onClick(e) {
+      return onExpand(record, e);
+    }
   }));
 };
 
-const Details = _ref => {
-  let {
-    transactionId,
-    ...paneProps
-  } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const {
-    isLoading,
-    data: {
-      amount,
-      netAmount,
-      status,
-      paymentAt,
-      identifier,
-      live,
-      splits = []
-    } = {}
-  } = usePlatformApi.useFetchStripePlatformTransaction(transactionId);
-  return /*#__PURE__*/React.createElement(Pane__default["default"], _extends._extends({}, paneProps, {
-    size: "large"
-  }), /*#__PURE__*/React.createElement(Pane__default["default"].Header, null, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "h2"
-  }, "Transaction Details")), /*#__PURE__*/React.createElement(Pane__default["default"].Body, null, isLoading ? /*#__PURE__*/React.createElement(PageLoader__default["default"], null) : /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-6 p-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.transactionPane.transactionId")), /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "neeto-ui-text-black font-medium",
-    style: "body2"
-  }, ExportModal.renderIdentifier({
-    identifier,
-    live
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.transactionPane.amount")), /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "neeto-ui-text-black font-medium",
-    style: "body2"
-  }, amount)), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.transactionPane.netAmount")), /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "neeto-ui-text-black font-medium",
-    style: "body2"
-  }, netAmount)), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.transactionPane.status")), renderFunctions.renderStatus("transaction", status)), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.transactionPane.paidOn")), /*#__PURE__*/React.createElement(Typography__default["default"], {
-    className: "neeto-ui-text-black font-medium",
-    style: "body2"
-  }, renderFunctions.renderDate(paymentAt)))), /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "h3"
-  }, "Splits"), /*#__PURE__*/React.createElement(SubTable, {
-    className: "ml-0 w-full",
-    data: splits
-  }))));
+var _excluded = ["transactionId"];
+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._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 Details = function Details(_ref) {
+  var transactionId = _ref.transactionId,
+    paneProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchStripePlatfo = usePlatformApi.useFetchStripePlatformTransaction(transactionId),
+    isLoading = _useFetchStripePlatfo.isLoading,
+    _useFetchStripePlatfo2 = _useFetchStripePlatfo.data,
+    _useFetchStripePlatfo3 = _useFetchStripePlatfo2 === void 0 ? {} : _useFetchStripePlatfo2,
+    amount = _useFetchStripePlatfo3.amount,
+    netAmount = _useFetchStripePlatfo3.netAmount,
+    status = _useFetchStripePlatfo3.status,
+    paymentAt = _useFetchStripePlatfo3.paymentAt,
+    identifier = _useFetchStripePlatfo3.identifier,
+    live = _useFetchStripePlatfo3.live,
+    _useFetchStripePlatfo4 = _useFetchStripePlatfo3.splits,
+    splits = _useFetchStripePlatfo4 === void 0 ? [] : _useFetchStripePlatfo4;
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], _objectSpread$2(_objectSpread$2({}, paneProps), {}, {
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: "Transaction Details"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+      children: isLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-full space-y-6 p-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "w-full space-y-2",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: t("neetoPayments.transactionPane.transactionId")
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "neeto-ui-text-black font-medium",
+              style: "body2",
+              children: ExportModal.renderIdentifier({
+                identifier: identifier,
+                live: live
+              })
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: t("neetoPayments.transactionPane.amount")
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "neeto-ui-text-black font-medium",
+              style: "body2",
+              children: amount
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: t("neetoPayments.transactionPane.netAmount")
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "neeto-ui-text-black font-medium",
+              style: "body2",
+              children: netAmount
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: t("neetoPayments.transactionPane.status")
+            }), renderFunctions.renderStatus("transaction", status)]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: t("neetoPayments.transactionPane.paidOn")
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "neeto-ui-text-black font-medium",
+              style: "body2",
+              children: renderFunctions.renderDate(paymentAt)
+            })]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          style: "h3",
+          children: "Splits"
+        }), /*#__PURE__*/jsxRuntime.jsx(SubTable, {
+          className: "ml-0 w-full",
+          data: splits
+        })]
+      })
+    })]
+  }));
 };
 
-const List = _ref => {
-  let {
-    isPlatformEnabled = false,
-    kind,
-    holdableId = null,
-    filters,
-    setIsFilterButtonVisible,
-    pageProperties,
-    setPageProperties,
-    tab,
-    paneStatus,
-    setPaneStatus,
-    setDataSize,
-    sortProperties,
-    setSortProperties,
-    payoutId,
-    columns
-  } = _ref;
-  const history = reactRouterDom.useHistory();
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const {
-    hideColumn,
-    hiddenColumns = []
-  } = Columns.useHiddenColumns(`stripePaymentDashboard_${kind}`);
-  const {
-    isLoading: isStripePlatformAccountLoading,
-    data: {
-      platformAccount: stripePlatformAccount
-    } = {}
-  } = usePlatformApi.useFetchStripePlatformAccount({
-    enabled: isPlatformEnabled
-  });
-  const {
-    isLoading: isStripeAccountLoading,
-    data: {
-      account: stripeConnectedAccount
-    } = {}
-  } = useConnectApi.useFetchConnectedStripeAccount(holdableId);
-  const {
-    data,
-    isDataLoading,
-    dataSize,
-    isDataFetching
-  } = useFetchData({
-    kind,
-    holdableId,
-    payload: renderFunctions.buildPayload({
-      tab,
-      filters,
-      pageProperties,
-      sortProperties,
-      payoutId
+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._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 List = function List(_ref) {
+  var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
+  var _ref$isPlatformEnable = _ref.isPlatformEnabled,
+    isPlatformEnabled = _ref$isPlatformEnable === void 0 ? false : _ref$isPlatformEnable,
+    kind = _ref.kind,
+    _ref$holdableId = _ref.holdableId,
+    holdableId = _ref$holdableId === void 0 ? null : _ref$holdableId,
+    filters = _ref.filters,
+    setIsFilterButtonVisible = _ref.setIsFilterButtonVisible,
+    pageProperties = _ref.pageProperties,
+    setPageProperties = _ref.setPageProperties,
+    tab = _ref.tab,
+    paneStatus = _ref.paneStatus,
+    setPaneStatus = _ref.setPaneStatus,
+    setDataSize = _ref.setDataSize,
+    sortProperties = _ref.sortProperties,
+    setSortProperties = _ref.setSortProperties,
+    payoutId = _ref.payoutId,
+    columns = _ref.columns;
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useHiddenColumns = Columns.useHiddenColumns("stripePaymentDashboard_".concat(kind)),
+    hideColumn = _useHiddenColumns.hideColumn,
+    _useHiddenColumns$hid = _useHiddenColumns.hiddenColumns,
+    hiddenColumns = _useHiddenColumns$hid === void 0 ? [] : _useHiddenColumns$hid;
+  var _useFetchStripePlatfo = usePlatformApi.useFetchStripePlatformAccount({
+      enabled: isPlatformEnabled
     }),
-    isPlatformEnabled
-  });
-  const isStripeAccountConnected = stripeConnectedAccount?.isConnected || stripePlatformAccount?.isConnected;
-  React$1.useEffect(() => {
+    isStripePlatformAccountLoading = _useFetchStripePlatfo.isLoading,
+    _useFetchStripePlatfo2 = _useFetchStripePlatfo.data,
+    _useFetchStripePlatfo3 = _useFetchStripePlatfo2 === void 0 ? {} : _useFetchStripePlatfo2,
+    stripePlatformAccount = _useFetchStripePlatfo3.platformAccount;
+  var _useFetchConnectedStr = useConnectApi.useFetchConnectedStripeAccount(holdableId),
+    isStripeAccountLoading = _useFetchConnectedStr.isLoading,
+    _useFetchConnectedStr2 = _useFetchConnectedStr.data,
+    _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
+    stripeConnectedAccount = _useFetchConnectedStr3.account;
+  var _useFetchData = useFetchData({
+      kind: kind,
+      holdableId: holdableId,
+      payload: renderFunctions.buildPayload({
+        tab: tab,
+        filters: filters,
+        pageProperties: pageProperties,
+        sortProperties: sortProperties,
+        payoutId: payoutId
+      }),
+      isPlatformEnabled: isPlatformEnabled
+    }),
+    data = _useFetchData.data,
+    isDataLoading = _useFetchData.isDataLoading,
+    dataSize = _useFetchData.dataSize,
+    isDataFetching = _useFetchData.isDataFetching;
+  var isStripeAccountConnected = (stripeConnectedAccount === null || stripeConnectedAccount === void 0 ? void 0 : stripeConnectedAccount.isConnected) || (stripePlatformAccount === null || stripePlatformAccount === void 0 ? void 0 : stripePlatformAccount.isConnected);
+  React.useEffect(function () {
     setIsFilterButtonVisible(neetoCist.isPresent(data) || neetoCist.isPresent(filters));
     setDataSize(dataSize);
   }, [data]);
-  const handleTablePaginaton = (page, pageSize) => {
-    const queryParams = utils.getQueryParams({
+  var handleTablePaginaton = function handleTablePaginaton(page, pageSize) {
+    var queryParams = utils.getQueryParams({
       toCamelCase: false
     });
     history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft({
-      page,
+      page: page,
       page_size: pageSize
     }, queryParams)));
     setPageProperties(ramda.assoc(tab, {
-      page,
-      pageSize
+      page: page,
+      pageSize: pageSize
     }));
   };
-  React$1.useEffect(() => {
+  React.useEffect(function () {
     handleTablePaginaton(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
     setSortProperties(constants.DEFAULT_SORT_PROPERTIES);
   }, [filters, tab]);
-  const handleTableChange = (_, __, sorter) => {
-    setSortProperties(neetoCist.isPresent(sorter?.column) ? {
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setSortProperties(neetoCist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
       sortBy: neetoCist.camelToSnakeCase(index$1.processDataIndex(sorter.field)),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
     } : constants.DEFAULT_SORT_PROPERTIES);
   };
   if (isStripeAccountLoading || isStripePlatformAccountLoading || isDataLoading) {
-    return /*#__PURE__*/React.createElement(PageLoader__default["default"], null);
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
   }
   if (!isStripeAccountConnected && dataSize <= 0 || !neetoCist.isPresent(data)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData__default["default"], {
-      title: tab === index.TAB.all ? t(`neetoPayments.emptyState.${kind}`) : t(`neetoPayments.emptyState.${kind}WithStatus`, {
-        status: tab
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        title: tab === index.TAB.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
+          status: tab
+        })
       })
-    }));
+    });
   }
-  const visibleColumns = columns.filter(_ref2 => {
-    let {
-      dataIndex
-    } = _ref2;
+  var visibleColumns = columns.filter(function (_ref2) {
+    var dataIndex = _ref2.dataIndex;
     return !hiddenColumns.includes(index$1.processDataIndex(dataIndex));
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableWrapper__default["default"], {
-    hasPagination: dataSize > pageProperties[tab]?.pageSize
-  }, /*#__PURE__*/React.createElement(Table__default["default"], {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: visibleColumns,
-    currentPageNumber: pageProperties[tab]?.page,
-    handlePageChange: handleTablePaginaton,
-    loading: isDataFetching,
-    rowData: renderFunctions.buildRowData({
-      data,
-      pageProperties,
-      tab
-    }),
-    rowSelection: false,
-    sortDirections: constants.SORT_DIRECTIONS,
-    totalCount: dataSize,
-    expandable: {
-      expandedRowRender: ExpandedRow,
-      showExpandColumn: ExportModal.isPlatformKind(kind),
-      rowExpandable: record => !(ramda.isEmpty(record.splits) && ramda.isEmpty(record.refunds)),
-      columnWidth: "64px",
-      expandIcon: RowExpander
-    },
-    paginationProps: {
-      showSizeChanger: true,
-      hideOnSinglePage: true,
-      pageSize: pageProperties[tab]?.pageSize,
-      total: dataSize
-    },
-    onChange: handleTableChange,
-    onColumnHide: column => {
-      hideColumn(index$1.processDataIndex(column.dataIndex));
-    }
-  })), /*#__PURE__*/React.createElement(Details, _extends._extends({}, paneStatus, {
-    onClose: () => setPaneStatus(index.INITIAL_PANE_STATUS)
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+      hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize),
+      children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+        fixedHeight: true,
+        allowRowClick: false,
+        columnData: visibleColumns,
+        currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
+        handlePageChange: handleTablePaginaton,
+        loading: isDataFetching,
+        rowData: renderFunctions.buildRowData({
+          data: data,
+          pageProperties: pageProperties,
+          tab: tab
+        }),
+        rowSelection: false,
+        sortDirections: constants.SORT_DIRECTIONS,
+        totalCount: dataSize,
+        expandable: {
+          expandedRowRender: ExpandedRow,
+          showExpandColumn: ExportModal.isPlatformKind(kind),
+          rowExpandable: function rowExpandable(record) {
+            return !(ramda.isEmpty(record.splits) && ramda.isEmpty(record.refunds));
+          },
+          columnWidth: "64px",
+          expandIcon: RowExpander
+        },
+        paginationProps: {
+          showSizeChanger: true,
+          hideOnSinglePage: true,
+          pageSize: (_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize,
+          total: dataSize
+        },
+        onChange: handleTableChange,
+        onColumnHide: function onColumnHide(column) {
+          hideColumn(index$1.processDataIndex(column.dataIndex));
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Details, _objectSpread$1(_objectSpread$1({}, paneStatus), {}, {
+      onClose: function onClose() {
+        return setPaneStatus(index.INITIAL_PANE_STATUS);
+      }
+    }))]
+  });
 };
 
-const Dashboard = _ref => {
-  let {
-    isPlatformEnabled = false,
-    searchProps,
-    headerProps = {},
-    holdableId = null,
-    payableEntityColumns = [],
-    kind = "connected",
-    payoutId = null
-  } = _ref;
-  const [_, startTransition] = React$1.useTransition();
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const [showExportModal, setShowExportModal] = React$1.useState(false);
-  const {
-    searchKeywordProps,
-    pageProperties,
-    filterableColumns,
-    isFilterButtonVisible,
-    isFilterPaneOpen,
-    filters,
-    tabs,
-    tab,
-    dataSize,
-    sortProperties,
-    columns,
-    modifiedColumns,
-    paneStatus,
-    setPaneStatus,
-    setIsFilterButtonVisible,
-    setIsFilterPaneOpen,
-    setFilters,
-    setPageProperties,
-    handleTabChange,
-    setDataSize,
-    setSortProperties
-  } = useFiltersAndPagination({
-    payableEntityColumns,
-    kind,
-    searchProps
-  });
-  const isTabsVisible = (isFilterButtonVisible || tab !== "all") && neetoCist.isNotPresent(payoutId);
-  const titleKind = kind === "transfer" && !isPlatformEnabled ? index.KIND.connected : kind;
-  const handleFiltersChange = filters => {
-    startTransition(() => {
+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._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 Dashboard = function Dashboard(_ref) {
+  var _ref$isPlatformEnable = _ref.isPlatformEnabled,
+    isPlatformEnabled = _ref$isPlatformEnable === void 0 ? false : _ref$isPlatformEnable,
+    searchProps = _ref.searchProps,
+    _ref$headerProps = _ref.headerProps,
+    headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
+    _ref$holdableId = _ref.holdableId,
+    holdableId = _ref$holdableId === void 0 ? null : _ref$holdableId,
+    _ref$payableEntityCol = _ref.payableEntityColumns,
+    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? "connected" : _ref$kind,
+    _ref$payoutId = _ref.payoutId,
+    payoutId = _ref$payoutId === void 0 ? null : _ref$payoutId;
+  var _useTransition = React.useTransition(),
+    _useTransition2 = slicedToArray._slicedToArray(_useTransition, 2);
+    _useTransition2[0];
+    var startTransition = _useTransition2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    showExportModal = _useState2[0],
+    setShowExportModal = _useState2[1];
+  var _useFiltersAndPaginat = useFiltersAndPagination({
+      payableEntityColumns: payableEntityColumns,
+      kind: kind,
+      searchProps: searchProps
+    }),
+    searchKeywordProps = _useFiltersAndPaginat.searchKeywordProps,
+    pageProperties = _useFiltersAndPaginat.pageProperties,
+    filterableColumns = _useFiltersAndPaginat.filterableColumns,
+    isFilterButtonVisible = _useFiltersAndPaginat.isFilterButtonVisible,
+    isFilterPaneOpen = _useFiltersAndPaginat.isFilterPaneOpen,
+    filters = _useFiltersAndPaginat.filters,
+    tabs = _useFiltersAndPaginat.tabs,
+    tab = _useFiltersAndPaginat.tab,
+    dataSize = _useFiltersAndPaginat.dataSize,
+    sortProperties = _useFiltersAndPaginat.sortProperties,
+    columns = _useFiltersAndPaginat.columns,
+    modifiedColumns = _useFiltersAndPaginat.modifiedColumns,
+    paneStatus = _useFiltersAndPaginat.paneStatus,
+    setPaneStatus = _useFiltersAndPaginat.setPaneStatus,
+    setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
+    setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
+    setFilters = _useFiltersAndPaginat.setFilters,
+    setPageProperties = _useFiltersAndPaginat.setPageProperties,
+    handleTabChange = _useFiltersAndPaginat.handleTabChange,
+    setDataSize = _useFiltersAndPaginat.setDataSize,
+    setSortProperties = _useFiltersAndPaginat.setSortProperties;
+  var isTabsVisible = (isFilterButtonVisible || tab !== "all") && neetoCist.isNotPresent(payoutId);
+  var titleKind = kind === "transfer" && !isPlatformEnabled ? index.KIND.connected : kind;
+  var handleFiltersChange = function handleFiltersChange(filters) {
+    startTransition(function () {
       setFilters(filters);
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header__default["default"], _extends._extends({}, headerProps, {
-    title: t(`neetoPayments.title.${titleKind}`),
-    searchProps: isFilterButtonVisible && {
-      placeholder: searchKeywordProps.placeholder,
-      className: "w-80"
-    }
-  })), isTabsVisible && /*#__PURE__*/React.createElement(Tab__default["default"], null, tabs.map(item => /*#__PURE__*/React.createElement(Tab__default["default"].Item, {
-    active: tab === item,
-    key: item,
-    onClick: () => handleTabChange(item)
-  }, t(`neetoPayments.common.${item}`)))), /*#__PURE__*/React.createElement(SubHeader__default["default"], {
-    className: "mt-4",
-    leftActionBlock: dataSize > 0 && /*#__PURE__*/React.createElement(Typography__default["default"], {
-      className: "neeto-ui-gray-800 mr-2 font-semibold",
-      component: "h4"
-    }, tab === index.TAB.all ? t(`neetoPayments.countOf.${kind}`, {
-      count: dataSize
-    }) : t(`neetoPayments.countOf.${kind}WithStatus`, {
-      count: dataSize,
-      status: tab
-    })),
-    rightActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(neetoFiltersFrontend.Bar, {
-      columns: filterableColumns,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFilterPaneOpen,
-      onChange: handleFiltersChange
-    }), isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader__default["default"].RightBlock, {
-      columnsButtonProps: {
-        columnData: modifiedColumns,
-        fixedColumns: index.DASHBOARD_MANDATORY_COLUMNS,
-        localStorageKey: `stripePaymentDashboard_${kind}`
-      },
-      downloadButtonProps: {
-        onClick: () => setShowExportModal(true)
-      },
-      filterProps: {
-        columns: filterableColumns,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleFiltersChange
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], _objectSpread(_objectSpread({}, headerProps), {}, {
+      title: t("neetoPayments.title.".concat(titleKind)),
+      searchProps: isFilterButtonVisible && {
+        placeholder: searchKeywordProps.placeholder,
+        className: "w-80"
       }
-    }))
-  }), /*#__PURE__*/React.createElement(List, {
-    columns,
-    filters,
-    holdableId,
-    isPlatformEnabled,
-    kind,
-    pageProperties,
-    paneStatus,
-    payoutId,
-    setDataSize,
-    setIsFilterButtonVisible,
-    setPageProperties,
-    setPaneStatus,
-    setSortProperties,
-    sortProperties,
-    tab
-  }), /*#__PURE__*/React.createElement(ExportModal.ExportModal, {
-    filters,
-    holdableId,
-    kind,
-    setShowExportModal,
-    showExportModal,
-    sortProperties,
-    tab
-  }));
+    })), isTabsVisible && /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"], {
+      children: tabs.map(function (item) {
+        return /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"].Item, {
+          active: tab === item,
+          onClick: function onClick() {
+            return handleTabChange(item);
+          },
+          children: t("neetoPayments.common.".concat(item))
+        }, item);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
+      className: "mt-4",
+      leftActionBlock: dataSize > 0 && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-gray-800 mr-2 font-semibold",
+        component: "h4",
+        children: tab === index.TAB.all ? t("neetoPayments.countOf.".concat(kind), {
+          count: dataSize
+        }) : t("neetoPayments.countOf.".concat(kind, "WithStatus"), {
+          count: dataSize,
+          status: tab
+        })
+      }),
+      rightActionBlock: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoFiltersFrontend.Bar, {
+          columns: filterableColumns,
+          keyword: searchKeywordProps,
+          setIsPaneOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
+        }), isFilterButtonVisible && /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"].RightBlock, {
+          columnsButtonProps: {
+            columnData: modifiedColumns,
+            fixedColumns: index.DASHBOARD_MANDATORY_COLUMNS,
+            localStorageKey: "stripePaymentDashboard_".concat(kind)
+          },
+          downloadButtonProps: {
+            onClick: function onClick() {
+              return setShowExportModal(true);
+            }
+          },
+          filterProps: {
+            columns: filterableColumns,
+            isOpen: isFilterPaneOpen,
+            keyword: searchKeywordProps,
+            setIsOpen: setIsFilterPaneOpen,
+            onChange: handleFiltersChange
+          }
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      columns: columns,
+      filters: filters,
+      holdableId: holdableId,
+      isPlatformEnabled: isPlatformEnabled,
+      kind: kind,
+      pageProperties: pageProperties,
+      paneStatus: paneStatus,
+      payoutId: payoutId,
+      setDataSize: setDataSize,
+      setIsFilterButtonVisible: setIsFilterButtonVisible,
+      setPageProperties: setPageProperties,
+      setPaneStatus: setPaneStatus,
+      setSortProperties: setSortProperties,
+      sortProperties: sortProperties,
+      tab: tab
+    }), /*#__PURE__*/jsxRuntime.jsx(ExportModal.ExportModal, {
+      filters: filters,
+      holdableId: holdableId,
+      kind: kind,
+      setShowExportModal: setShowExportModal,
+      showExportModal: showExportModal,
+      sortProperties: sortProperties,
+      tab: tab
+    })]
+  });
 };
 var Dashboard$1 = reactUtils.withTitle(renderFunctions.withReactQuery(Dashboard), i18next.t("neetoPayments.common.payments"));