@bigbinary/neeto-payments-frontend 1.3.13 → 1.3.15

package/dist/index.cjs.js

@@ -17,6 +17,7 @@ var neetoIcons = require('@bigbinary/neeto-icons');
 var axios = require('axios');
 var neetoCist = require('@bigbinary/neeto-cist');
 var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
+var Columns = require('@bigbinary/neeto-molecules/Columns');
 var reactRouterDom = require('react-router-dom');
 var ramda = require('ramda');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
@@ -164,6 +165,7 @@ var FILTER_COLUMNS$3 = [{
   type: "date",
   showRuleSelector: true
 }];
+var STRIPE_ACCOUNTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY = "stripeAccountsDashboard";
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -766,7 +768,7 @@ var ExportModal$2 = function ExportModal(_ref) {
     var payload = _objectSpread$b({
       kind: "account",
       token: token,
-      filters: JSON.stringify(filters),
+      filters: filters,
       tab: tab
     }, sortProperties);
     exportCsv(payload, {
@@ -791,8 +793,8 @@ var ExportModal$2 = function ExportModal(_ref) {
     return setShowExportModal(false);
   };
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    isOpen: showExportModal,
-    onClose: onClose
+    onClose: onClose,
+    isOpen: showExportModal
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
   }, t("neetoPayments.export.title.account"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -986,20 +988,23 @@ var COLUMNS$3 = [{
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
-  width: "72px"
+  width: "72px",
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "identifier",
   width: "300px",
-  render: renderIdentifier$2
+  render: renderIdentifier$2,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.status"),
   dataIndex: "status",
   key: "status",
   width: "150px",
   render: renderStatus("account"),
-  sorter: true
+  sorter: true,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.name"),
   dataIndex: "first_name",
@@ -1054,10 +1059,9 @@ var useFiltersAndPagination$3 = function useFiltersAndPagination() {
     _useState10 = _slicedToArray(_useState9, 2),
     tab = _useState10[0],
     setTab = _useState10[1];
-  var _useState11 = React.useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    hiddenColumns = _useState12[0],
-    setHiddenColumns = _useState12[1];
+  var _useHiddenColumns = Columns.useHiddenColumns(STRIPE_ACCOUNTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY),
+    hideColumn = _useHiddenColumns.hideColumn,
+    getVisibleColumnData = _useHiddenColumns.getVisibleColumnData;
   var _getQueryParams = utils$3.getQueryParams(),
     _getQueryParams$searc = _getQueryParams.searchTerm,
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
@@ -1065,21 +1069,18 @@ var useFiltersAndPagination$3 = function useFiltersAndPagination() {
     key: "search_term",
     value: searchTerm.trim()
   });
-  var _useState13 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS$3), [searchKeywordProps]))),
+  var _useState11 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS$3), [searchKeywordProps]))),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filters = _useState12[0],
+    setFilters = _useState12[1];
+  var _useState13 = React.useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    filters = _useState14[0],
-    setFilters = _useState14[1];
-  var _useState15 = React.useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    dataSize = _useState16[0],
-    setDataSize = _useState16[1];
+    dataSize = _useState14[0],
+    setDataSize = _useState14[1];
   var selectableColumnData = tab !== TAB$3.all ? neetoCist.removeBy({
     key: "status"
   }, COLUMNS$3) : COLUMNS$3;
-  var columnData = selectableColumnData.filter(function (_ref) {
-    var dataIndex = _ref.dataIndex;
-    return !hiddenColumns.includes(dataIndex);
-  });
+  var columnData = getVisibleColumnData(selectableColumnData);
   var handleTabChange = function handleTabChange(tab) {
     var _pageProperties$tab, _pageProperties$tab2;
     urlSearchParams.set("tab", tab);
@@ -1099,7 +1100,7 @@ var useFiltersAndPagination$3 = function useFiltersAndPagination() {
     selectableColumnData: selectableColumnData,
     dataSize: dataSize,
     setDataSize: setDataSize,
-    setHiddenColumns: setHiddenColumns,
+    hideColumn: hideColumn,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setIsFilterPaneOpen: setIsFilterPaneOpen,
     setPageProperties: setPageProperties,
@@ -1157,7 +1158,8 @@ var List$3 = function List(_ref) {
     setPageProperties = _ref.setPageProperties,
     setSortProperties = _ref.setSortProperties,
     sortProperties = _ref.sortProperties,
-    tab = _ref.tab;
+    tab = _ref.tab,
+    hideColumn = _ref.hideColumn;
   var urlSearchParams = useURLSearchParams();
   var history = reactRouterDom.useHistory();
   var _useTranslation = reactI18next.useTranslation(),
@@ -1228,9 +1230,9 @@ var List$3 = function List(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: dataSize > ((_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize)
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+    columnData: columnData,
     fixedHeight: true,
     allowRowClick: false,
-    columnData: columnData,
     currentPageNumber: (_pageProperties$tab4 = pageProperties[tab]) === null || _pageProperties$tab4 === void 0 ? void 0 : _pageProperties$tab4.page,
     handlePageChange: handleTablePagination,
     loading: isFetching,
@@ -1248,7 +1250,11 @@ var List$3 = function List(_ref) {
       pageSize: (_pageProperties$tab5 = pageProperties[tab]) === null || _pageProperties$tab5 === void 0 ? void 0 : _pageProperties$tab5.pageSize,
       total: dataSize
     },
-    onChange: handleTableChange
+    onChange: handleTableChange,
+    onColumnHide: function onColumnHide(_ref2) {
+      var dataIndex = _ref2.dataIndex;
+      return hideColumn(dataIndex);
+    }
   }));
 };
 
@@ -1274,8 +1280,8 @@ var AccountsDashboard = function AccountsDashboard() {
     columnData = _useFiltersAndPaginat.columnData,
     selectableColumnData = _useFiltersAndPaginat.selectableColumnData,
     dataSize = _useFiltersAndPaginat.dataSize,
+    hideColumn = _useFiltersAndPaginat.hideColumn,
     setDataSize = _useFiltersAndPaginat.setDataSize,
-    setHiddenColumns = _useFiltersAndPaginat.setHiddenColumns,
     setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
     setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
     setPageProperties = _useFiltersAndPaginat.setPageProperties,
@@ -1322,10 +1328,7 @@ var AccountsDashboard = function AccountsDashboard() {
       columnsButtonProps: {
         columnData: selectableColumnData,
         fixedColumns: DASHBOARD_MANDATORY_COLUMNS$2,
-        onChange: function onChange(_, hiddenColumns) {
-          return setHiddenColumns(hiddenColumns);
-        },
-        localStorageKey: "stripeAccountsDashboard"
+        localStorageKey: STRIPE_ACCOUNTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY
       },
       downloadButtonProps: {
         onClick: function onClick() {
@@ -1344,6 +1347,7 @@ var AccountsDashboard = function AccountsDashboard() {
     columnData: columnData,
     filters: filters,
     handleTabChange: handleTabChange,
+    hideColumn: hideColumn,
     pageProperties: pageProperties,
     setDataSize: setDataSize,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
@@ -1585,35 +1589,40 @@ var COLUMNS$2 = [{
   dataIndex: "id",
   key: "id",
   width: "72px",
-  position: 0
+  position: 0,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "identifier",
   width: "300px",
   render: renderIdentifier$1,
-  position: 1
+  position: 1,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "splitIdentifier",
   width: "300px",
   render: renderSplitIdentifier,
-  position: 1
+  position: 1,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "refundIdentifier",
   width: "300px",
   render: renderRefundIdentifier,
-  position: 1
+  position: 1,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "transferIdentifier",
   width: "300px",
   render: renderTransferIdentifier,
-  position: 1
+  position: 1,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.status"),
   dataIndex: "status",
@@ -1621,7 +1630,8 @@ var COLUMNS$2 = [{
   width: "150px",
   render: renderStatus("transaction"),
   sorter: true,
-  position: 2
+  position: 2,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.amount"),
   dataIndex: "amount",
@@ -1661,19 +1671,20 @@ var COLUMNS$2 = [{
   key: "refundStatus",
   render: renderStatus("refund"),
   sorter: true,
-  position: 3
+  position: 3,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.paymentAmount"),
   dataIndex: "paymentAmount",
   key: "paymentAmount",
-  width: "150px",
+  width: "240px",
   sorter: true,
   position: 4
 }, {
   title: i18next.t("neetoPayments.common.refundAmount"),
   dataIndex: "amount",
   key: "refundAmount",
-  width: "150px",
+  width: "200px",
   sorter: true,
   position: 3
 }, {
@@ -1691,7 +1702,8 @@ var COLUMNS$2 = [{
   width: "150px",
   render: renderStatus("split"),
   sorter: true,
-  position: 3
+  position: 3,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.transferTime"),
   key: "splitTime",
@@ -2009,7 +2021,7 @@ var ExportModal$1 = function ExportModal(_ref) {
     var payload = _objectSpread$8({
       kind: isTransferKind(kind) ? "connected" : kind,
       token: token,
-      filters: JSON.stringify(filters),
+      filters: filters,
       tab: tab,
       holdableId: holdableId
     }, sortProperties);
@@ -2035,8 +2047,8 @@ var ExportModal$1 = function ExportModal(_ref) {
     return setShowExportModal(false);
   };
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
-    isOpen: showExportModal,
-    onClose: onClose
+    onClose: onClose,
+    isOpen: showExportModal
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
   }, t("neetoPayments.export.title.".concat(kind)))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -2095,10 +2107,9 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     tab = _useState10[0],
     setTab = _useState10[1];
-  var _useState11 = React.useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    hiddenColumns = _useState12[0],
-    setHiddenColumns = _useState12[1];
+  var _useHiddenColumns = Columns.useHiddenColumns("stripePaymentDashboard_".concat(kind)),
+    _useHiddenColumns$hid = _useHiddenColumns.hiddenColumns,
+    hiddenColumns = _useHiddenColumns$hid === void 0 ? [] : _useHiddenColumns$hid;
   var filterableColumns = buildFilterColumns$1(tab, kind, payableEntityColumns);
   var _getQueryParams = utils$3.getQueryParams(),
     _getQueryParams$searc = _getQueryParams.searchTerm,
@@ -2110,18 +2121,18 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination(_ref) {
     key: "search_term",
     value: searchTerm.trim()
   });
-  var _useState13 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+  var _useState11 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filters = _useState12[0],
+    setFilters = _useState12[1];
+  var _useState13 = React.useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    filters = _useState14[0],
-    setFilters = _useState14[1];
-  var _useState15 = React.useState(0),
+    dataSize = _useState14[0],
+    setDataSize = _useState14[1];
+  var _useState15 = React.useState(INITIAL_PANE_STATUS),
     _useState16 = _slicedToArray(_useState15, 2),
-    dataSize = _useState16[0],
-    setDataSize = _useState16[1];
-  var _useState17 = React.useState(INITIAL_PANE_STATUS),
-    _useState18 = _slicedToArray(_useState17, 2),
-    paneStatus = _useState18[0],
-    setPaneStatus = _useState18[1];
+    paneStatus = _useState16[0],
+    setPaneStatus = _useState16[1];
   var columns = buildPaymentColumns$1({
     tab: tab,
     kind: kind,
@@ -2159,7 +2170,6 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination(_ref) {
     sortProperties: sortProperties,
     columnData: columnData,
     selectableColumnData: selectableColumnData,
-    setHiddenColumns: setHiddenColumns,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setIsFilterPaneOpen: setIsFilterPaneOpen,
     setPageProperties: setPageProperties,
@@ -4722,6 +4732,9 @@ var List$2 = function List(_ref) {
     var _TAB_METADATA$tab;
     return !((_TAB_METADATA$tab = TAB_METADATA$1[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 _useHiddenColumns = Columns.useHiddenColumns("stripePaymentDashboard_".concat(kind)),
+    hideColumn = _useHiddenColumns.hideColumn,
+    getVisibleColumnData = _useHiddenColumns.getVisibleColumnData;
   var _useFetchStripePlatfo = useFetchStripePlatformAccount({
       enabled: isPlatformEnabled
     }),
@@ -4803,7 +4816,7 @@ var List$2 = function List(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
     allowRowClick: false,
-    columnData: columnData,
+    columnData: getVisibleColumnData(columnData),
     currentPageNumber: (_pageProperties$tab4 = pageProperties[tab]) === null || _pageProperties$tab4 === void 0 ? void 0 : _pageProperties$tab4.page,
     handlePageChange: handleTablePaginaton,
     loading: isDataFetching,
@@ -4830,7 +4843,10 @@ var List$2 = function List(_ref) {
       pageSize: (_pageProperties$tab5 = pageProperties[tab]) === null || _pageProperties$tab5 === void 0 ? void 0 : _pageProperties$tab5.pageSize,
       total: dataSize
     },
-    onChange: handleTableChange
+    onChange: handleTableChange,
+    onColumnHide: function onColumnHide(column) {
+      hideColumn(processDataIndex(column.dataIndex));
+    }
   })), /*#__PURE__*/React__default["default"].createElement(Details, _extends$1({}, paneStatus, {
     onClose: function onClose() {
       return setPaneStatus(INITIAL_PANE_STATUS);
@@ -4880,7 +4896,6 @@ var Dashboard = function Dashboard(_ref) {
     columnData = _useFiltersAndPaginat.columnData,
     selectableColumnData = _useFiltersAndPaginat.selectableColumnData,
     paneStatus = _useFiltersAndPaginat.paneStatus,
-    setHiddenColumns = _useFiltersAndPaginat.setHiddenColumns,
     setPaneStatus = _useFiltersAndPaginat.setPaneStatus,
     setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
     setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
@@ -4930,9 +4945,6 @@ var Dashboard = function Dashboard(_ref) {
       columnsButtonProps: {
         columnData: selectableColumnData,
         fixedColumns: DASHBOARD_MANDATORY_COLUMNS$1,
-        onChange: function onChange(_, hiddenColumns) {
-          return setHiddenColumns(hiddenColumns);
-        },
         localStorageKey: "stripePaymentDashboard_".concat(kind)
       },
       downloadButtonProps: {
@@ -4957,14 +4969,14 @@ var Dashboard = function Dashboard(_ref) {
     kind: kind,
     pageProperties: pageProperties,
     paneStatus: paneStatus,
+    payoutId: payoutId,
     setDataSize: setDataSize,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setPageProperties: setPageProperties,
     setPaneStatus: setPaneStatus,
     setSortProperties: setSortProperties,
     sortProperties: sortProperties,
-    tab: tab,
-    payoutId: payoutId
+    tab: tab
   }), /*#__PURE__*/React__default["default"].createElement(ExportModal$1, {
     filters: filters,
     holdableId: holdableId,
@@ -5009,6 +5021,7 @@ var DEFAULT_SORT_PROPERTIES = {
   sortBy: "created_at",
   orderBy: "DESC"
 };
+var STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY = "stripePayoutsDashboard";
 
 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(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; }
@@ -5046,7 +5059,7 @@ var ExportModal = function ExportModal(_ref) {
     var payload = _objectSpread$4({
       kind: "payout",
       token: token,
-      filters: JSON.stringify(filters),
+      filters: filters,
       tab: tab
     }, sortProperties);
     exportCsv(payload, {
@@ -5103,14 +5116,16 @@ var COLUMNS$1 = [{
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
-  width: "72px"
+  width: "72px",
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.status"),
   dataIndex: "status",
   key: "status",
   render: renderStatus("payout"),
   width: "150px",
-  sorter: true
+  sorter: true,
+  isHidable: false
 }, {
   title: i18next.t("neetoPayments.common.amount"),
   dataIndex: "amount",
@@ -5141,7 +5156,8 @@ var IDENTIFIER_COLUMN = {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "identifier",
-  width: "300px"
+  width: "300px",
+  isHidable: false
 };
 
 var processTab = function processTab(status) {
@@ -5188,10 +5204,9 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(payoutsPageRout
     _useState10 = _slicedToArray(_useState9, 2),
     tab = _useState10[0],
     setTab = _useState10[1];
-  var _useState11 = React.useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    hiddenColumns = _useState12[0],
-    setHiddenColumns = _useState12[1];
+  var _useHiddenColumns = Columns.useHiddenColumns(STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY),
+    hideColumn = _useHiddenColumns.hideColumn,
+    getVisibleColumnData = _useHiddenColumns.getVisibleColumnData;
   var _getQueryParams = utils$3.getQueryParams(),
     _getQueryParams$searc = _getQueryParams.searchTerm,
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
@@ -5199,23 +5214,20 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(payoutsPageRout
     key: "search_term",
     value: searchTerm.trim()
   });
-  var _useState13 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]))),
+  var _useState11 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]))),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filters = _useState12[0],
+    setFilters = _useState12[1];
+  var _useState13 = React.useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    filters = _useState14[0],
-    setFilters = _useState14[1];
-  var _useState15 = React.useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    dataSize = _useState16[0],
-    setDataSize = _useState16[1];
+    dataSize = _useState14[0],
+    setDataSize = _useState14[1];
   var identifierColumn = ramda.assoc("render", renderPayoutIdentifier$1(payoutsPageRoute), IDENTIFIER_COLUMN);
   var columns = ramda.insert(1, identifierColumn, COLUMNS$1);
   var selectableColumnData = tab !== TAB$1.all ? neetoCist.removeBy({
     key: "status"
   }, columns) : columns;
-  var columnData = selectableColumnData.filter(function (_ref) {
-    var dataIndex = _ref.dataIndex;
-    return !hiddenColumns.includes(dataIndex);
-  });
+  var columnData = getVisibleColumnData(selectableColumnData);
   var handleTabChange = function handleTabChange(tab) {
     var _pageProperties$tab, _pageProperties$tab2;
     urlSearchParams.set("tab", tab);
@@ -5231,11 +5243,11 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(payoutsPageRout
     searchKeywordProps: searchKeywordProps,
     tab: tab,
     sortProperties: sortProperties,
-    columnData: columnData,
     selectableColumnData: selectableColumnData,
+    columnData: columnData,
     dataSize: dataSize,
     setDataSize: setDataSize,
-    setHiddenColumns: setHiddenColumns,
+    hideColumn: hideColumn,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setIsFilterPaneOpen: setIsFilterPaneOpen,
     setPageProperties: setPageProperties,
@@ -5279,7 +5291,8 @@ var List$1 = function List(_ref) {
     setSortProperties = _ref.setSortProperties,
     sortProperties = _ref.sortProperties,
     tab = _ref.tab,
-    isPlatformEnabled = _ref.isPlatformEnabled;
+    isPlatformEnabled = _ref.isPlatformEnabled,
+    hideColumn = _ref.hideColumn;
   var urlSearchParams = useURLSearchParams();
   var history = reactRouterDom.useHistory();
   var _useTranslation = reactI18next.useTranslation(),
@@ -5366,7 +5379,11 @@ var List$1 = function List(_ref) {
       pageSize: (_pageProperties$tab5 = pageProperties[tab]) === null || _pageProperties$tab5 === void 0 ? void 0 : _pageProperties$tab5.pageSize,
       total: dataSize
     },
-    onChange: handleTableChange
+    onChange: handleTableChange,
+    onColumnHide: function onColumnHide(_ref2) {
+      var dataIndex = _ref2.dataIndex;
+      return hideColumn(dataIndex);
+    }
   }));
 };
 
@@ -5395,13 +5412,13 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
     selectableColumnData = _useFiltersAndPaginat.selectableColumnData,
     dataSize = _useFiltersAndPaginat.dataSize,
     setDataSize = _useFiltersAndPaginat.setDataSize,
-    setHiddenColumns = _useFiltersAndPaginat.setHiddenColumns,
     setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
     setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
     setPageProperties = _useFiltersAndPaginat.setPageProperties,
     setFilters = _useFiltersAndPaginat.setFilters,
     handleTabChange = _useFiltersAndPaginat.handleTabChange,
-    setSortProperties = _useFiltersAndPaginat.setSortProperties;
+    setSortProperties = _useFiltersAndPaginat.setSortProperties,
+    hideColumn = _useFiltersAndPaginat.hideColumn;
   var isTabsVisible = isFilterButtonVisible || tab !== "all";
   var handleFiltersChange = function handleFiltersChange(filters) {
     startTransition(function () {
@@ -5442,10 +5459,7 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
       columnsButtonProps: {
         columnData: selectableColumnData,
         fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
-        onChange: function onChange(_, hiddenColumns) {
-          return setHiddenColumns(hiddenColumns);
-        },
-        localStorageKey: "stripePayoutsDashboard"
+        localStorageKey: STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY
       },
       downloadButtonProps: {
         onClick: function onClick() {
@@ -5464,14 +5478,15 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
     columnData: columnData,
     filters: filters,
     handleTabChange: handleTabChange,
+    hideColumn: hideColumn,
+    isPlatformEnabled: isPlatformEnabled,
     pageProperties: pageProperties,
     setDataSize: setDataSize,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setPageProperties: setPageProperties,
     setSortProperties: setSortProperties,
     sortProperties: sortProperties,
-    tab: tab,
-    isPlatformEnabled: isPlatformEnabled
+    tab: tab
   }), /*#__PURE__*/React__default["default"].createElement(ExportModal, {
     filters: filters,
     setShowExportModal: setShowExportModal,