@bigbinary/neeto-payments-frontend 1.4.9 → 1.4.11

package/dist/index.js

@@ -13,7 +13,7 @@ import { DEFAULT_STALE_TIME, DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigb
 import { Download, Down, Right } from '@bigbinary/neeto-icons';
 import axios from 'axios';
 import { noop, camelToSnakeCase, isPresent, snakeToCamelCase, capitalize, removeBy, filterBy, isNotPresent, humanize } from '@bigbinary/neeto-cist';
-import { createSubscription, getQueryParams, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { createSubscription, getQueryParams, buildUrl, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import { isEmpty, assoc, modify, concat, curry, pipe, split, map, join, mergeLeft, equals, sortBy, prop, evolve, insert, mergeDeepLeft } from 'ramda';
 import { useHistory } from 'react-router-dom';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
@@ -24,10 +24,11 @@ import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import require$$0 from 'util';
 import { useParams } from 'react-router-dom/cjs/react-router-dom';
 import classNames from 'classnames';
-import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import { Finish as Finish$1, Modal as Modal$1, Demo } from 'neetointegrations';
-import { Form, Select } from '@bigbinary/neetoui/formik';
+import { Form, Select, Input, Button as Button$1 } from '@bigbinary/neetoui/formik';
 import * as yup from 'yup';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -1102,7 +1103,7 @@ var useFetchConnectedAccounts = function useFetchConnectedAccounts() {
   }, options);
 };
 
-var List$4 = function List(_ref) {
+var List$5 = function List(_ref) {
   var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
   var columnData = _ref.columnData,
     filters = _ref.filters,
@@ -1287,7 +1288,7 @@ var AccountsDashboard = function AccountsDashboard() {
         onChange: handleFiltersChange
       }
     }))
-  }), /*#__PURE__*/React__default.createElement(List$4, {
+  }), /*#__PURE__*/React__default.createElement(List$5, {
     columnData: columnData,
     filters: filters,
     pageProperties: pageProperties,
@@ -4661,7 +4662,7 @@ var Details = function Details(_ref) {
   }))));
 };
 
-var List$3 = function List(_ref) {
+var List$4 = function List(_ref) {
   var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
   var _ref$isPlatformEnable = _ref.isPlatformEnabled,
     isPlatformEnabled = _ref$isPlatformEnable === void 0 ? false : _ref$isPlatformEnable,
@@ -4908,7 +4909,7 @@ var Dashboard = function Dashboard(_ref) {
         onChange: handleFiltersChange
       }
     }))
-  }), /*#__PURE__*/React__default.createElement(List$3, {
+  }), /*#__PURE__*/React__default.createElement(List$4, {
     columns: columns,
     filters: filters,
     holdableId: holdableId,
@@ -5223,7 +5224,7 @@ var useFetchData$1 = function useFetchData(_ref) {
   };
 };
 
-var List$2 = function List(_ref) {
+var List$3 = function List(_ref) {
   var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
   var columnData = _ref.columnData,
     filters = _ref.filters,
@@ -5407,7 +5408,7 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
         onChange: handleFiltersChange
       }
     }))
-  }), /*#__PURE__*/React__default.createElement(List$2, {
+  }), /*#__PURE__*/React__default.createElement(List$3, {
     columnData: columnData,
     filters: filters,
     isPlatformEnabled: isPlatformEnabled,
@@ -5559,52 +5560,682 @@ var PayoutsPage = function PayoutsPage(_ref) {
   })));
 };
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
+var renderIdentifier$1 = function renderIdentifier() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$identifier = _ref.identifier,
+    identifier = _ref$identifier === void 0 ? "" : _ref$identifier;
+  var isTemporaryIdentifier = identifier.startsWith("temp_");
+  if (isTemporaryIdentifier) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      content: t$1("neetoPayments.tooltipContent.paymentIdentifierUnavailable"),
+      position: "top"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "text-center"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      style: "body2"
+    }, t$1("neetoPayments.common.notAvailable"))));
   }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
+  return /*#__PURE__*/React__default.createElement(CopyButtonWrapper, {
+    content: identifier
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    href: "https://dashboard.razorpay.com/app/payments/".concat(identifier),
+    label: identifier,
+    size: "small",
+    style: "link",
+    target: "_blank"
+  }));
+};
 
-var regeneratorRuntime$1 = {exports: {}};
+var COLUMNS$1 = [{
+  title: t$1("neetoPayments.common.id"),
+  dataIndex: "id",
+  key: "id",
+  width: "72px",
+  isHidable: false
+}, {
+  title: t$1("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "identifier",
+  width: "290px",
+  render: renderIdentifier$1,
+  isHidable: false
+}, {
+  title: t$1("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "status",
+  sorter: true,
+  width: "150px",
+  render: renderStatus("payment"),
+  isHidable: false
+}, {
+  title: t$1("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  key: "amount",
+  sorter: true,
+  width: "150px"
+}, {
+  title: t$1("neetoPayments.common.paymentTime"),
+  dataIndex: "paymentAt",
+  key: "paymentTime",
+  sorter: true,
+  width: "220px",
+  render: renderDate
+}];
+var COLUMN_METADATA$1 = {
+  status: {
+    isHidden: {
+      successful: true,
+      declined: true,
+      pending: true,
+      refunded: true
+    }
+  }
+};
 
-var _typeof = {exports: {}};
+equals("razorpayRefund");
+var isPaymentKind$1 = equals("razorpayPayment");
+var buildPaymentColumns$1 = function buildPaymentColumns(_ref) {
+  var tab = _ref.tab,
+    kind = _ref.kind,
+    _ref$payableEntityCol = _ref.payableEntityColumns,
+    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol;
+  return COLUMNS$1.filter(function (_ref2) {
+    var _COLUMN_METADATA$key, _COLUMN_METADATA$key2;
+    var key = _ref2.key;
+    return !((_COLUMN_METADATA$key = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key !== void 0 && (_COLUMN_METADATA$key = _COLUMN_METADATA$key.isHidden) !== null && _COLUMN_METADATA$key !== void 0 && _COLUMN_METADATA$key[kind] || (_COLUMN_METADATA$key2 = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key2 !== void 0 && (_COLUMN_METADATA$key2 = _COLUMN_METADATA$key2.isHidden) !== null && _COLUMN_METADATA$key2 !== void 0 && _COLUMN_METADATA$key2[tab]);
+  }).concat(payableEntityColumns.filter(function (_ref3) {
+    var isHidden = _ref3.isHidden;
+    return !(isHidden !== null && isHidden !== void 0 && isHidden[tab] || isHidden !== null && isHidden !== void 0 && isHidden[kind]);
+  }));
+};
 
-_typeof.exports;
+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(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 FilterWrapper = function FilterWrapper(_ref) {
+  var _ref$setShowExportMod = _ref.setShowExportModal,
+    setShowExportModal = _ref$setShowExportMod === void 0 ? noop : _ref$setShowExportMod,
+    searchProps = _ref.searchProps,
+    _ref$headerProps = _ref.headerProps,
+    headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
+    children = _ref.children,
+    title = _ref.title,
+    searchTerm = _ref.searchTerm,
+    filterableColumns = _ref.filterableColumns,
+    isFilterButtonVisible = _ref.isFilterButtonVisible,
+    isFilterPaneOpen = _ref.isFilterPaneOpen,
+    tabs = _ref.tabs,
+    tab = _ref.tab,
+    setIsFilterPaneOpen = _ref.setIsFilterPaneOpen,
+    setFilters = _ref.setFilters,
+    handleTabChange = _ref.handleTabChange,
+    dataSize = _ref.dataSize,
+    kind = _ref.kind,
+    payableEntityColumns = _ref.payableEntityColumns;
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2);
+    _useTransition2[0];
+    var startTransition = _useTransition2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isTabsVisible = isFilterButtonVisible || tab !== "all";
+  var searchKeywordProps = _objectSpread$3(_objectSpread$3({}, searchProps), {}, {
+    value: searchTerm.trim(),
+    setValue: noop
+  });
+  var handleFiltersChange = function handleFiltersChange(filters) {
+    startTransition(function () {
+      setFilters(filters);
+    });
+  };
+  var columnData = buildPaymentColumns$1({
+    tab: tab,
+    kind: kind,
+    payableEntityColumns: payableEntityColumns
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Header, _extends$1({}, _objectSpread$3(_objectSpread$3({}, headerProps), {}, {
+    title: title
+  }), {
+    searchProps: {
+      placeholder: searchKeywordProps.placeholder,
+      className: "w-80"
+    }
+  })), isTabsVisible && /*#__PURE__*/React__default.createElement(Tab, null, tabs.map(function (item) {
+    return /*#__PURE__*/React__default.createElement(Tab.Item, {
+      active: tab === item,
+      key: item,
+      onClick: function onClick() {
+        return handleTabChange(item);
+      }
+    }, t("neetoPayments.common.".concat(item)));
+  })), /*#__PURE__*/React__default.createElement(SubHeader, {
+    className: "mt-4",
+    leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React__default.createElement(Typography, {
+      className: "neeto-ui-gray-800 mr-2 font-semibold",
+      component: "h4"
+    }, tab === "all" ? t("neetoPayments.countOf.".concat(kind), {
+      count: dataSize
+    }) : t("neetoPayments.countOf.".concat(kind, "WithStatus"), {
+      count: dataSize,
+      status: tab
+    })),
+    rightActionBlock: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Bar, {
+      columns: filterableColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    }), isFilterButtonVisible && /*#__PURE__*/React__default.createElement(SubHeader.RightBlock, {
+      columnsButtonProps: {
+        columnData: columnData,
+        fixedColumns: DASHBOARD_MANDATORY_COLUMNS$1,
+        localStorageKey: "paymentDashboard_".concat(kind)
+      },
+      downloadButtonProps: {
+        onClick: function onClick() {
+          return setShowExportModal(true);
+        }
+      },
+      filterProps: {
+        columns: filterableColumns,
+        isOpen: isFilterPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFilterPaneOpen,
+        onChange: handleFiltersChange
+      }
+    }))
+  }), children);
+};
 
-(function (module) {
-	function _typeof(o) {
-	  "@babel/helpers - typeof";
+var renderIdentifier = function renderIdentifier() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$identifier = _ref.identifier,
+    identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
+    _ref$receiptUrl = _ref.receiptUrl,
+    receiptUrl = _ref$receiptUrl === void 0 ? "" : _ref$receiptUrl;
+  return /*#__PURE__*/React__default.createElement(CopyButtonWrapper, {
+    content: identifier
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    href: receiptUrl,
+    label: identifier,
+    size: "small",
+    style: "link",
+    target: "_blank"
+  }));
+};
+var truncatedText = function truncatedText(_ref2) {
+  var identifier = _ref2.identifier;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    content: identifier,
+    position: "top"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-64 truncate"
+  }, identifier));
+};
 
-	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-	    return typeof o;
-	  } : function (o) {
-	    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
+var COLUMNS = [{
+  title: t$1("neetoPayments.common.id"),
+  dataIndex: "id",
+  key: "id",
+  width: "72px"
+}, {
+  title: t$1("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "identifier",
+  width: "290px",
+  render: renderIdentifier
+}, {
+  title: t$1("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "status",
+  sorter: true,
+  render: renderStatus("payment")
+}, {
+  title: t$1("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "refundIdentifier",
+  width: "290px",
+  render: truncatedText
+}, {
+  title: t$1("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "refundStatus",
+  sorter: true,
+  render: renderStatus("refund")
+}, {
+  title: t$1("neetoPayments.common.paymentIdentifier"),
+  dataIndex: "payment",
+  key: "paymentIdentifier",
+  width: "290px",
+  render: renderIdentifier
+}, {
+  title: t$1("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  key: "amount",
+  sorter: true,
+  width: "150px"
+}, {
+  title: t$1("neetoPayments.common.paymentTime"),
+  dataIndex: "updatedAt",
+  key: "paymentTime",
+  sorter: true,
+  width: "220px",
+  render: renderDate
+}];
+var COLUMN_METADATA = {
+  identifier: {
+    isHidden: {
+      squareRefund: true
+    }
+  },
+  status: {
+    isHidden: {
+      squareRefund: true,
+      completed: true,
+      failed: true
+    }
+  },
+  refundIdentifier: {
+    isHidden: {
+      squarePayment: true
+    }
+  },
+  refundStatus: {
+    isHidden: {
+      squarePayment: true,
+      completed: true,
+      pending: true,
+      rejected: true
+    }
+  },
+  paymentIdentifier: {
+    isHidden: {
+      squarePayment: true
+    }
+  }
+};
+
+var isRefundKind = equals("squareRefund");
+var isPaymentKind = equals("squarePayment");
+var buildFilterColumns = function buildFilterColumns() {
+  var payableEntityColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return concat(FILTER_COLUMNS$2, map(prop("filterProps"), filterBy({
+    isFilterable: true
+  }, payableEntityColumns)));
+};
+var buildPaymentColumns = function buildPaymentColumns(_ref) {
+  var tab = _ref.tab,
+    kind = _ref.kind,
+    _ref$payableEntityCol = _ref.payableEntityColumns,
+    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol;
+  return COLUMNS.filter(function (_ref2) {
+    var _COLUMN_METADATA$key, _COLUMN_METADATA$key2;
+    var key = _ref2.key;
+    return !((_COLUMN_METADATA$key = COLUMN_METADATA[key]) !== null && _COLUMN_METADATA$key !== void 0 && (_COLUMN_METADATA$key = _COLUMN_METADATA$key.isHidden) !== null && _COLUMN_METADATA$key !== void 0 && _COLUMN_METADATA$key[kind] || (_COLUMN_METADATA$key2 = COLUMN_METADATA[key]) !== null && _COLUMN_METADATA$key2 !== void 0 && (_COLUMN_METADATA$key2 = _COLUMN_METADATA$key2.isHidden) !== null && _COLUMN_METADATA$key2 !== void 0 && _COLUMN_METADATA$key2[tab]);
+  }).concat(payableEntityColumns.filter(function (_ref3) {
+    var isHidden = _ref3.isHidden;
+    return !(isHidden !== null && isHidden !== void 0 && isHidden[tab] || isHidden !== null && isHidden !== void 0 && isHidden[kind]);
+  }));
+};
+
+var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
+  var payableEntityColumns = _ref.payableEntityColumns,
+    kind = _ref.kind,
+    initialTabs = _ref.initialTabs,
+    tabMetaData = _ref.tabMetaData;
+  var history = useHistory();
+  var tabs = initialTabs.filter(function (tab) {
+    var _tabMetaData$tab;
+    return !((_tabMetaData$tab = tabMetaData[tab]) !== null && _tabMetaData$tab !== void 0 && (_tabMetaData$tab = _tabMetaData$tab.isHidden) !== null && _tabMetaData$tab !== void 0 && _tabMetaData$tab[kind]);
+  });
+  var _useState = useState(DEFAULT_SORT_PROPERTIES$1),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortProperties = _useState2[0],
+    setSortProperties = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFilterButtonVisible = _useState4[0],
+    setIsFilterButtonVisible = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFilterPaneOpen = _useState6[0],
+    setIsFilterPaneOpen = _useState6[1];
+  var _useState7 = useState(buildDefaultPageProperties(tabs)),
+    _useState8 = _slicedToArray(_useState7, 2),
+    pageProperties = _useState8[0],
+    setPageProperties = _useState8[1];
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$tab = _useQueryParams.tab,
+    tab = _useQueryParams$tab === void 0 ? "all" : _useQueryParams$tab;
+  var filterableColumns = buildFilterColumns(payableEntityColumns);
+  var _useState9 = useState(buildFiltersFromURL(filterableColumns)),
+    _useState10 = _slicedToArray(_useState9, 2),
+    filters = _useState10[0],
+    setFilters = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dataSize = _useState12[0],
+    setDataSize = _useState12[1];
+  var _getQueryParams = getQueryParams(),
+    _getQueryParams$searc = _getQueryParams.searchTerm,
+    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
+  var handleTabChange = function handleTabChange(tab) {
+    var _pageProperties$tab, _pageProperties$tab2;
+    var queryParams = getQueryParams({
+      toCamelCase: false
+    });
+    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(buildUrl(window.location.pathname, mergeLeft(newParams, queryParams)));
+  };
+  return {
+    isFilterButtonVisible: isFilterButtonVisible,
+    isFilterPaneOpen: isFilterPaneOpen,
+    pageProperties: pageProperties,
+    filters: filters,
+    searchTerm: searchTerm,
+    tabs: tabs,
+    tab: tab,
+    filterableColumns: filterableColumns,
+    dataSize: dataSize,
+    sortProperties: sortProperties,
+    setIsFilterButtonVisible: setIsFilterButtonVisible,
+    setIsFilterPaneOpen: setIsFilterPaneOpen,
+    setPageProperties: setPageProperties,
+    setSortProperties: setSortProperties,
+    setFilters: setFilters,
+    handleTabChange: handleTabChange,
+    setDataSize: setDataSize
+  };
+};
+
+var TAB$1 = {
+  all: "all",
+  successful: "successful",
+  declined: "declined",
+  refunded: "refunded"
+};
+var TABS$1 = Object.values(TAB$1);
+
+var defaultShow$1 = function defaultShow() {
+  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdable/account"));
+};
+var show$1 = function show(holdableId) {
+  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdables/").concat(holdableId, "/account"));
+};
+var accountsApi$1 = {
+  defaultShow: defaultShow$1,
+  show: show$1
+};
+
+var useFetchRazorpayAccount = function useFetchRazorpayAccount(holdableId) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([QUERY_KEYS.SQUARE_ACCOUNT_DETAILS, holdableId], function () {
+    if (isPresent(holdableId)) return accountsApi$1.show(holdableId);
+    return accountsApi$1.defaultShow();
+  }, options);
+};
+
+var create$1 = function create(payload) {
+  return axios.post("".concat(BASE_URL, "/api/v1/public/razorpay/payments"), {
+    payment: payload
+  });
+};
+var defaultList$2 = function defaultList(payload) {
+  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdable/payments"), {
+    params: payload
+  });
+};
+var list$2 = function list(holdableId, payload) {
+  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdables/").concat(holdableId, "/payments"), {
+    params: payload
+  });
+};
+var paymentsApi$1 = {
+  defaultList: defaultList$2,
+  list: list$2,
+  create: create$1
+};
+
+var useFetchRazorpayPayments = function useFetchRazorpayPayments() {
+  var holdableId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return useQuery([QUERY_KEYS.SQUARE_PAYMENTS_LIST, payload], function () {
+    if (isPresent(holdableId)) return paymentsApi$1.list(holdableId, payload);
+    return paymentsApi$1.defaultList(payload);
+  }, options);
+};
+var useCreateRazorpayPayment = function useCreateRazorpayPayment(options) {
+  return useMutation(paymentsApi$1.create, options);
+};
+
+var List$2 = function List(_ref) {
+  var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
+  var holdableId = _ref.holdableId,
+    kind = _ref.kind,
+    filters = _ref.filters,
+    setIsFilterButtonVisible = _ref.setIsFilterButtonVisible,
+    pageProperties = _ref.pageProperties,
+    payableEntityColumns = _ref.payableEntityColumns,
+    setPageProperties = _ref.setPageProperties,
+    tab = _ref.tab,
+    sortProperties = _ref.sortProperties,
+    setSortProperties = _ref.setSortProperties,
+    setDataSize = _ref.setDataSize;
+  var history = useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var columnData = buildPaymentColumns$1({
+    tab: tab,
+    kind: kind,
+    payableEntityColumns: payableEntityColumns
+  });
+  var _useFetchRazorpayAcco = useFetchRazorpayAccount(),
+    isAccountLoading = _useFetchRazorpayAcco.isLoading,
+    _useFetchRazorpayAcco2 = _useFetchRazorpayAcco.data,
+    _useFetchRazorpayAcco3 = _useFetchRazorpayAcco2 === void 0 ? {} : _useFetchRazorpayAcco2,
+    account = _useFetchRazorpayAcco3.account;
+  var payload = buildPayload({
+    tab: tab,
+    filters: filters,
+    pageProperties: pageProperties,
+    sortProperties: sortProperties
+  });
+  var _useHiddenColumns = useHiddenColumns("paymentDashboard_".concat(kind)),
+    hideColumn = _useHiddenColumns.hideColumn,
+    _useHiddenColumns$hid = _useHiddenColumns.hiddenColumns,
+    hiddenColumns = _useHiddenColumns$hid === void 0 ? [] : _useHiddenColumns$hid;
+  var _useFetchRazorpayPaym = useFetchRazorpayPayments(holdableId, payload, {
+      enabled: isPaymentKind$1(kind)
+    }),
+    _useFetchRazorpayPaym2 = _useFetchRazorpayPaym.data,
+    _useFetchRazorpayPaym3 = _useFetchRazorpayPaym2 === void 0 ? {} : _useFetchRazorpayPaym2,
+    payments = _useFetchRazorpayPaym3.payments,
+    _useFetchRazorpayPaym4 = _useFetchRazorpayPaym3.views,
+    views = _useFetchRazorpayPaym4 === void 0 ? {} : _useFetchRazorpayPaym4,
+    isPaymentsLoaidng = _useFetchRazorpayPaym.isLoading,
+    isFetching = _useFetchRazorpayPaym.isFetching;
+  useEffect(function () {
+    setIsFilterButtonVisible(isPresent(payments) || isPresent(filters));
+    setDataSize(views[tab]);
+  }, [payments]);
+  var handleTablePaginaton = function handleTablePaginaton(page, pageSize) {
+    var queryParams = getQueryParams({
+      toCamelCase: false
+    });
+    history.push(buildUrl(window.location.pathname, mergeLeft({
+      page: page,
+      page_size: pageSize
+    }, queryParams)));
+    setPageProperties(assoc(tab, {
+      page: page,
+      pageSize: pageSize
+    }));
+  };
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setSortProperties(isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
+      sortBy: camelToSnakeCase(sorter.field),
+      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
+    } : DEFAULT_SORT_PROPERTIES$1);
+  };
+  var visibleColumns = columnData.filter(function (_ref2) {
+    var dataIndex = _ref2.dataIndex;
+    return !hiddenColumns.includes(processDataIndex(dataIndex));
+  });
+  if (isAccountLoading || isPaymentsLoaidng) {
+    return /*#__PURE__*/React__default.createElement(PageLoader, null);
+  }
+  if (!(account !== null && account !== void 0 && account.isConnected) && views <= 0 || !isPresent(payments)) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex h-full w-full items-center justify-center"
+    }, /*#__PURE__*/React__default.createElement(NoData, {
+      title: tab === TAB$1.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
+        status: tab
+      })
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(TableWrapper, {
+    hasPagination: views > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
+  }, /*#__PURE__*/React__default.createElement(Table, {
+    fixedHeight: true,
+    allowRowClick: false,
+    columnData: visibleColumns,
+    currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
+    handlePageChange: handleTablePaginaton,
+    loading: isFetching,
+    rowData: buildRowData({
+      data: payments,
+      pageProperties: pageProperties,
+      tab: tab
+    }),
+    rowSelection: false,
+    sortDirections: SORT_DIRECTIONS,
+    totalCount: views,
+    paginationProps: {
+      showSizeChanger: true,
+      hideOnSinglePage: true,
+      pageSize: (_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize,
+      total: views
+    },
+    onChange: handleTableChange,
+    onColumnHide: function onColumnHide(columnData) {
+      hideColumn(processDataIndex(columnData.dataIndex));
+    }
+  }));
+};
+
+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 RazorpayDashboard = function RazorpayDashboard(_ref) {
+  var 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 ? "razorpayPayment" : _ref$kind;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showExportModal = _useState2[0],
+    setShowExportModal = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var filterPaginationState = useFiltersAndPagination({
+    payableEntityColumns: payableEntityColumns,
+    kind: kind,
+    initialTabs: TABS$1,
+    tabMetaData: {}
+  });
+  var filters = filterPaginationState.filters,
+    setIsFilterButtonVisible = filterPaginationState.setIsFilterButtonVisible,
+    pageProperties = filterPaginationState.pageProperties,
+    setPageProperties = filterPaginationState.setPageProperties,
+    sortProperties = filterPaginationState.sortProperties,
+    setSortProperties = filterPaginationState.setSortProperties,
+    tab = filterPaginationState.tab,
+    setDataSize = filterPaginationState.setDataSize;
+  return /*#__PURE__*/React__default.createElement(FilterWrapper, _extends$1({
+    title: t("neetoPayments.common.razorpayPayments")
+  }, _objectSpread$2({
+    headerProps: headerProps,
+    kind: kind,
+    payableEntityColumns: payableEntityColumns,
+    searchProps: searchProps,
+    setShowExportModal: setShowExportModal
+  }, filterPaginationState)), /*#__PURE__*/React__default.createElement(List$2, {
+    filters: filters,
+    holdableId: holdableId,
+    kind: kind,
+    pageProperties: pageProperties,
+    payableEntityColumns: payableEntityColumns,
+    setDataSize: setDataSize,
+    setIsFilterButtonVisible: setIsFilterButtonVisible,
+    setPageProperties: setPageProperties,
+    setSortProperties: setSortProperties,
+    sortProperties: sortProperties,
+    tab: tab
+  }), /*#__PURE__*/React__default.createElement(ExportModal$1, {
+    filters: filters,
+    holdableId: holdableId,
+    kind: kind,
+    setShowExportModal: setShowExportModal,
+    showExportModal: showExportModal,
+    sortProperties: sortProperties,
+    tab: tab
+  }));
+};
+var index$1 = withTitle(withReactQuery(RazorpayDashboard), t$1("neetoPayments.common.razorpayPayments"));
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
+
+var regeneratorRuntime$1 = {exports: {}};
+
+var _typeof = {exports: {}};
+
+_typeof.exports;
+
+(function (module) {
+	function _typeof(o) {
+	  "@babel/helpers - typeof";
+
+	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+	    return typeof o;
+	  } : function (o) {
+	    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
 	}
 	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
 } (_typeof));
@@ -5924,527 +6555,250 @@ var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
 // TODO(Babel 8): Remove this file.
 
 var runtime = regeneratorRuntimeExports();
-var regenerator = runtime;
-
-// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  if (typeof globalThis === "object") {
-    globalThis.regeneratorRuntime = runtime;
-  } else {
-    Function("r", "regeneratorRuntime = r")(runtime);
-  }
-}
-
-var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
-
-var useSquarePayment = function useSquarePayment() {
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    instance = _useState2[0],
-    setInstance = _useState2[1];
-  var applicationId = process.env.SQUARE_APPLICATION_ID;
-  var locationId = process.env.SQUARE_CLIENT_LOCATION;
-  useEffect(function () {
-    var loadPayment = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var square, _yield$square, payments, paymentInstance;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              square = function square() {
-                return import('./index-87824935.js');
-              };
-              _context.next = 3;
-              return square();
-            case 3:
-              _yield$square = _context.sent;
-              payments = _yield$square.payments;
-              _context.next = 7;
-              return payments(applicationId, locationId);
-            case 7:
-              paymentInstance = _context.sent;
-              if (paymentInstance) {
-                _context.next = 10;
-                break;
-              }
-              throw new Error("Square Web Payments SDK failed to load");
-            case 10:
-              setInstance(paymentInstance);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function loadPayment() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    if (applicationId && locationId) loadPayment();
-  }, [applicationId, locationId]);
-  return instance;
-};
-
-var SQUARE_EVENTS = ["focusClassAdded", "focusClassRemoved", "errorClassAdded", "errorClassRemoved", "cardBrandChanged", "postalCodeChanged"];
-var DEFAULT_CARD_CONTAINER_ID = "square-card-container";
-var DEFAULT_SQUARE_CARD_OPTIONS = {};
-
-var SquareCard = function SquareCard(_ref) {
-  var card = _ref.card,
-    setCard = _ref.setCard,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? DEFAULT_CARD_CONTAINER_ID : _ref$id,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? DEFAULT_SQUARE_CARD_OPTIONS : _ref$options,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var payments = useSquarePayment();
-  useEffect(function () {
-    var fetchCard = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var cardResponse;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return payments === null || payments === void 0 ? void 0 : payments.card();
-            case 2:
-              cardResponse = _context.sent;
-              _context.next = 5;
-              return cardResponse === null || cardResponse === void 0 ? void 0 : cardResponse.attach("#".concat(id));
-            case 5:
-              setCard(cardResponse || null);
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function fetchCard() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchCard();
-  }, [payments, id]);
-  useEffect(function () {
-    SQUARE_EVENTS.forEach(function (event) {
-      return card === null || card === void 0 ? void 0 : card.addEventListener(event, onChange);
-    });
-  }, [card, onChange]);
-  useEffect(function () {
-    card === null || card === void 0 || card.configure(options);
-  }, [card, options]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    id: id,
-    className: classNames({
-      "pointer-events-none": disabled,
-      "text-center": !card
-    })
-  }, !card && /*#__PURE__*/React__default.createElement(Spinner, null));
-};
-
-var renderIdentifier$1 = function renderIdentifier() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$identifier = _ref.identifier,
-    identifier = _ref$identifier === void 0 ? "" : _ref$identifier;
-  var isTemporaryIdentifier = identifier.startsWith("temp_");
-  if (isTemporaryIdentifier) {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
-      content: t$1("neetoPayments.tooltipContent.paymentIdentifierUnavailable"),
-      position: "top"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "text-center"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      style: "body2"
-    }, t$1("neetoPayments.common.notAvailable"))));
-  }
-  return /*#__PURE__*/React__default.createElement(CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    href: "https://dashboard.razorpay.com/app/payments/".concat(identifier),
-    label: identifier,
-    size: "small",
-    style: "link",
-    target: "_blank"
-  }));
-};
-
-var COLUMNS$1 = [{
-  title: t$1("neetoPayments.common.id"),
-  dataIndex: "id",
-  key: "id",
-  width: "72px",
-  isHidable: false
-}, {
-  title: t$1("neetoPayments.common.identifier"),
-  dataIndex: "identifier",
-  key: "identifier",
-  width: "290px",
-  render: renderIdentifier$1,
-  isHidable: false
-}, {
-  title: t$1("neetoPayments.common.status"),
-  dataIndex: "status",
-  key: "status",
-  sorter: true,
-  width: "150px",
-  render: renderStatus("payment"),
-  isHidable: false
-}, {
-  title: t$1("neetoPayments.common.amount"),
-  dataIndex: "amount",
-  key: "amount",
-  sorter: true,
-  width: "150px"
-}, {
-  title: t$1("neetoPayments.common.paymentTime"),
-  dataIndex: "paymentAt",
-  key: "paymentTime",
-  sorter: true,
-  width: "220px",
-  render: renderDate
-}];
-var COLUMN_METADATA$1 = {
-  status: {
-    isHidden: {
-      successful: true,
-      declined: true,
-      pending: true,
-      refunded: true
-    }
-  }
-};
-
-equals("razorpayRefund");
-var isPaymentKind$1 = equals("razorpayPayment");
-var buildPaymentColumns$1 = function buildPaymentColumns(_ref) {
-  var tab = _ref.tab,
-    kind = _ref.kind,
-    _ref$payableEntityCol = _ref.payableEntityColumns,
-    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol;
-  return COLUMNS$1.filter(function (_ref2) {
-    var _COLUMN_METADATA$key, _COLUMN_METADATA$key2;
-    var key = _ref2.key;
-    return !((_COLUMN_METADATA$key = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key !== void 0 && (_COLUMN_METADATA$key = _COLUMN_METADATA$key.isHidden) !== null && _COLUMN_METADATA$key !== void 0 && _COLUMN_METADATA$key[kind] || (_COLUMN_METADATA$key2 = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key2 !== void 0 && (_COLUMN_METADATA$key2 = _COLUMN_METADATA$key2.isHidden) !== null && _COLUMN_METADATA$key2 !== void 0 && _COLUMN_METADATA$key2[tab]);
-  }).concat(payableEntityColumns.filter(function (_ref3) {
-    var isHidden = _ref3.isHidden;
-    return !(isHidden !== null && isHidden !== void 0 && isHidden[tab] || isHidden !== null && isHidden !== void 0 && isHidden[kind]);
-  }));
-};
+var regenerator = runtime;
 
-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(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 FilterWrapper = function FilterWrapper(_ref) {
-  var _ref$setShowExportMod = _ref.setShowExportModal,
-    setShowExportModal = _ref$setShowExportMod === void 0 ? noop : _ref$setShowExportMod,
-    searchProps = _ref.searchProps,
-    _ref$headerProps = _ref.headerProps,
-    headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
-    children = _ref.children,
-    title = _ref.title,
-    searchTerm = _ref.searchTerm,
-    filterableColumns = _ref.filterableColumns,
-    isFilterButtonVisible = _ref.isFilterButtonVisible,
-    isFilterPaneOpen = _ref.isFilterPaneOpen,
-    tabs = _ref.tabs,
-    tab = _ref.tab,
-    setIsFilterPaneOpen = _ref.setIsFilterPaneOpen,
-    setFilters = _ref.setFilters,
-    handleTabChange = _ref.handleTabChange,
-    dataSize = _ref.dataSize,
-    kind = _ref.kind,
-    payableEntityColumns = _ref.payableEntityColumns;
-  var _useTransition = useTransition(),
-    _useTransition2 = _slicedToArray(_useTransition, 2);
-    _useTransition2[0];
-    var startTransition = _useTransition2[1];
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+
+var loadScript$1 = function loadScript(src) {
+  return new Promise(function (resolve) {
+    var script = document.createElement("script");
+    script.src = src;
+    script.onload = function () {
+      resolve(true);
+    };
+    script.onerror = function () {
+      resolve(false);
+    };
+    document.body.appendChild(script);
+  });
+};
+var RazorpayPaymentButton = function RazorpayPaymentButton(_ref) {
+  var label = _ref.label,
+    payableId = _ref.payableId,
+    discountCode = _ref.discountCode,
+    email = _ref.email,
+    name = _ref.name,
+    _ref$isCardPreservabl = _ref.isCardPreservable,
+    isCardPreservable = _ref$isCardPreservabl === void 0 ? false : _ref$isCardPreservabl,
+    _ref$onBeforePayment = _ref.onBeforePayment,
+    onBeforePayment = _ref$onBeforePayment === void 0 ? noop : _ref$onBeforePayment,
+    _ref$onSuccessfulPaym = _ref.onSuccessfulPayment,
+    onSuccessfulPayment = _ref$onSuccessfulPaym === void 0 ? noop : _ref$onSuccessfulPaym,
+    _ref$onFailedPayment = _ref.onFailedPayment,
+    onFailedPayment = _ref$onFailedPayment === void 0 ? noop : _ref$onFailedPayment;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var isTabsVisible = isFilterButtonVisible || tab !== "all";
-  var searchKeywordProps = _objectSpread$3(_objectSpread$3({}, searchProps), {}, {
-    value: searchTerm.trim(),
-    setValue: noop
-  });
-  var handleFiltersChange = function handleFiltersChange(filters) {
-    startTransition(function () {
-      setFilters(filters);
-    });
-  };
-  var columnData = buildPaymentColumns$1({
-    tab: tab,
-    kind: kind,
-    payableEntityColumns: payableEntityColumns
-  });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Header, _extends$1({}, _objectSpread$3(_objectSpread$3({}, headerProps), {}, {
-    title: title
-  }), {
-    searchProps: {
-      placeholder: searchKeywordProps.placeholder,
-      className: "w-80"
-    }
-  })), isTabsVisible && /*#__PURE__*/React__default.createElement(Tab, null, tabs.map(function (item) {
-    return /*#__PURE__*/React__default.createElement(Tab.Item, {
-      active: tab === item,
-      key: item,
-      onClick: function onClick() {
-        return handleTabChange(item);
-      }
-    }, t("neetoPayments.common.".concat(item)));
-  })), /*#__PURE__*/React__default.createElement(SubHeader, {
-    className: "mt-4",
-    leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React__default.createElement(Typography, {
-      className: "neeto-ui-gray-800 mr-2 font-semibold",
-      component: "h4"
-    }, tab === "all" ? t("neetoPayments.countOf.".concat(kind), {
-      count: dataSize
-    }) : t("neetoPayments.countOf.".concat(kind, "WithStatus"), {
-      count: dataSize,
-      status: tab
-    })),
-    rightActionBlock: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Bar, {
-      columns: filterableColumns,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFilterPaneOpen,
-      onChange: handleFiltersChange
-    }), isFilterButtonVisible && /*#__PURE__*/React__default.createElement(SubHeader.RightBlock, {
-      columnsButtonProps: {
-        columnData: columnData,
-        fixedColumns: DASHBOARD_MANDATORY_COLUMNS$1,
-        localStorageKey: "paymentDashboard_".concat(kind)
-      },
-      downloadButtonProps: {
-        onClick: function onClick() {
-          return setShowExportModal(true);
+  var openRazorpayCheckout = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
+      var script, checkout;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return loadScript$1("https://checkout.razorpay.com/v1/checkout.js");
+          case 2:
+            script = _context.sent;
+            if (script) {
+              _context.next = 6;
+              break;
+            }
+            logger.error(t("neetoPayments.razorpay.loadError"));
+            return _context.abrupt("return");
+          case 6:
+            checkout = new window.Razorpay(options);
+            checkout.open();
+          case 8:
+          case "end":
+            return _context.stop();
         }
-      },
-      filterProps: {
-        columns: filterableColumns,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleFiltersChange
-      }
-    }))
-  }), children);
-};
-
-var renderIdentifier = function renderIdentifier() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$identifier = _ref.identifier,
-    identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
-    _ref$receiptUrl = _ref.receiptUrl,
-    receiptUrl = _ref$receiptUrl === void 0 ? "" : _ref$receiptUrl;
-  return /*#__PURE__*/React__default.createElement(CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    href: receiptUrl,
-    label: identifier,
-    size: "small",
-    style: "link",
-    target: "_blank"
-  }));
-};
-var truncatedText = function truncatedText(_ref2) {
-  var identifier = _ref2.identifier;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: identifier,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-64 truncate"
-  }, identifier));
-};
-
-var COLUMNS = [{
-  title: t$1("neetoPayments.common.id"),
-  dataIndex: "id",
-  key: "id",
-  width: "72px"
-}, {
-  title: t$1("neetoPayments.common.identifier"),
-  dataIndex: "identifier",
-  key: "identifier",
-  width: "290px",
-  render: renderIdentifier
-}, {
-  title: t$1("neetoPayments.common.status"),
-  dataIndex: "status",
-  key: "status",
-  sorter: true,
-  render: renderStatus("payment")
-}, {
-  title: t$1("neetoPayments.common.identifier"),
-  dataIndex: "identifier",
-  key: "refundIdentifier",
-  width: "290px",
-  render: truncatedText
-}, {
-  title: t$1("neetoPayments.common.status"),
-  dataIndex: "status",
-  key: "refundStatus",
-  sorter: true,
-  render: renderStatus("refund")
-}, {
-  title: t$1("neetoPayments.common.paymentIdentifier"),
-  dataIndex: "payment",
-  key: "paymentIdentifier",
-  width: "290px",
-  render: renderIdentifier
-}, {
-  title: t$1("neetoPayments.common.amount"),
-  dataIndex: "amount",
-  key: "amount",
-  sorter: true,
-  width: "150px"
-}, {
-  title: t$1("neetoPayments.common.paymentTime"),
-  dataIndex: "updatedAt",
-  key: "paymentTime",
-  sorter: true,
-  width: "220px",
-  render: renderDate
-}];
-var COLUMN_METADATA = {
-  identifier: {
-    isHidden: {
-      squareRefund: true
-    }
-  },
-  status: {
-    isHidden: {
-      squareRefund: true,
-      completed: true,
-      failed: true
-    }
-  },
-  refundIdentifier: {
-    isHidden: {
-      squarePayment: true
-    }
-  },
-  refundStatus: {
-    isHidden: {
-      squarePayment: true,
-      completed: true,
-      pending: true,
-      rejected: true
+      }, _callee);
+    }));
+    return function openRazorpayCheckout(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handlePayment = function handlePayment(response) {
+    if (isNotPresent(response === null || response === void 0 ? void 0 : response.razorpay_signature)) {
+      onFailedPayment();
+      return;
     }
-  },
-  paymentIdentifier: {
-    isHidden: {
-      squarePayment: true
+    onSuccessfulPayment();
+  };
+  var handleSuccess = function handleSuccess(_ref3) {
+    var payment = _ref3.payment;
+    if ((payment === null || payment === void 0 ? void 0 : payment.status) === "successful") {
+      return onSuccessfulPayment();
     }
-  }
+    var save = isCardPreservable ? 1 : 0;
+    var options = {
+      save: save,
+      key: payment.publicKey,
+      order_id: payment.orderIdentifier,
+      customer_id: payment.customerIdentifier,
+      prefill: {
+        name: name,
+        email: email
+      },
+      modal: {
+        confirm_close: true,
+        ondismiss: onFailedPayment
+      },
+      handler: handlePayment
+    };
+    return openRazorpayCheckout(mergeDeepLeft(RAZORPAY_PAYMENT_BUTTON_OPTIONS, options));
+  };
+  var _useCreateRazorpayPay = useCreateRazorpayPayment({
+      onSuccess: handleSuccess
+    }),
+    isLoading = _useCreateRazorpayPay.isLoading,
+    createRazorpayOrder = _useCreateRazorpayPay.mutate;
+  var handleClick = function handleClick() {
+    onBeforePayment();
+    var payload = {
+      payableId: payableId,
+      discountCode: discountCode,
+      customerAttributes: {
+        email: email,
+        name: name
+      }
+    };
+    createRazorpayOrder(payload);
+  };
+  return /*#__PURE__*/React__default.createElement(Button, {
+    disabled: isLoading,
+    label: label || t("neetoPayments.common.pay"),
+    loading: isLoading,
+    onClick: handleClick
+  });
 };
 
-var isRefundKind = equals("squareRefund");
-var isPaymentKind = equals("squarePayment");
-var buildFilterColumns = function buildFilterColumns() {
-  var payableEntityColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return concat(FILTER_COLUMNS$2, map(prop("filterProps"), filterBy({
-    isFilterable: true
-  }, payableEntityColumns)));
-};
-var buildPaymentColumns = function buildPaymentColumns(_ref) {
-  var tab = _ref.tab,
-    kind = _ref.kind,
-    _ref$payableEntityCol = _ref.payableEntityColumns,
-    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol;
-  return COLUMNS.filter(function (_ref2) {
-    var _COLUMN_METADATA$key, _COLUMN_METADATA$key2;
-    var key = _ref2.key;
-    return !((_COLUMN_METADATA$key = COLUMN_METADATA[key]) !== null && _COLUMN_METADATA$key !== void 0 && (_COLUMN_METADATA$key = _COLUMN_METADATA$key.isHidden) !== null && _COLUMN_METADATA$key !== void 0 && _COLUMN_METADATA$key[kind] || (_COLUMN_METADATA$key2 = COLUMN_METADATA[key]) !== null && _COLUMN_METADATA$key2 !== void 0 && (_COLUMN_METADATA$key2 = _COLUMN_METADATA$key2.isHidden) !== null && _COLUMN_METADATA$key2 !== void 0 && _COLUMN_METADATA$key2[tab]);
-  }).concat(payableEntityColumns.filter(function (_ref3) {
-    var isHidden = _ref3.isHidden;
-    return !(isHidden !== null && isHidden !== void 0 && isHidden[tab] || isHidden !== null && isHidden !== void 0 && isHidden[kind]);
-  }));
+var useSquarePayment = function useSquarePayment() {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    instance = _useState2[0],
+    setInstance = _useState2[1];
+  var applicationId = process.env.SQUARE_APPLICATION_ID;
+  var locationId = process.env.SQUARE_CLIENT_LOCATION;
+  useEffect(function () {
+    var loadPayment = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var square, _yield$square, payments, paymentInstance;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              square = function square() {
+                return import('./index-87824935.js');
+              };
+              _context.next = 3;
+              return square();
+            case 3:
+              _yield$square = _context.sent;
+              payments = _yield$square.payments;
+              _context.next = 7;
+              return payments(applicationId, locationId);
+            case 7:
+              paymentInstance = _context.sent;
+              if (paymentInstance) {
+                _context.next = 10;
+                break;
+              }
+              throw new Error("Square Web Payments SDK failed to load");
+            case 10:
+              setInstance(paymentInstance);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function loadPayment() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    if (applicationId && locationId) loadPayment();
+  }, [applicationId, locationId]);
+  return instance;
 };
 
-var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
-  var payableEntityColumns = _ref.payableEntityColumns,
-    kind = _ref.kind,
-    initialTabs = _ref.initialTabs,
-    tabMetaData = _ref.tabMetaData;
-  var history = useHistory();
-  var tabs = initialTabs.filter(function (tab) {
-    var _tabMetaData$tab;
-    return !((_tabMetaData$tab = tabMetaData[tab]) !== null && _tabMetaData$tab !== void 0 && (_tabMetaData$tab = _tabMetaData$tab.isHidden) !== null && _tabMetaData$tab !== void 0 && _tabMetaData$tab[kind]);
-  });
-  var _useState = useState(DEFAULT_SORT_PROPERTIES$1),
-    _useState2 = _slicedToArray(_useState, 2),
-    sortProperties = _useState2[0],
-    setSortProperties = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFilterButtonVisible = _useState4[0],
-    setIsFilterButtonVisible = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isFilterPaneOpen = _useState6[0],
-    setIsFilterPaneOpen = _useState6[1];
-  var _useState7 = useState(buildDefaultPageProperties(tabs)),
-    _useState8 = _slicedToArray(_useState7, 2),
-    pageProperties = _useState8[0],
-    setPageProperties = _useState8[1];
-  var _useQueryParams = useQueryParams(),
-    _useQueryParams$tab = _useQueryParams.tab,
-    tab = _useQueryParams$tab === void 0 ? "all" : _useQueryParams$tab;
-  var filterableColumns = buildFilterColumns(payableEntityColumns);
-  var _useState9 = useState(buildFiltersFromURL(filterableColumns)),
-    _useState10 = _slicedToArray(_useState9, 2),
-    filters = _useState10[0],
-    setFilters = _useState10[1];
-  var _useState11 = useState(0),
-    _useState12 = _slicedToArray(_useState11, 2),
-    dataSize = _useState12[0],
-    setDataSize = _useState12[1];
-  var _getQueryParams = getQueryParams(),
-    _getQueryParams$searc = _getQueryParams.searchTerm,
-    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
-  var handleTabChange = function handleTabChange(tab) {
-    var _pageProperties$tab, _pageProperties$tab2;
-    var queryParams = getQueryParams({
-      toCamelCase: false
+var SQUARE_EVENTS = ["focusClassAdded", "focusClassRemoved", "errorClassAdded", "errorClassRemoved", "cardBrandChanged", "postalCodeChanged"];
+var DEFAULT_CARD_CONTAINER_ID = "square-card-container";
+var DEFAULT_SQUARE_CARD_OPTIONS = {};
+
+var SquareCard = function SquareCard(_ref) {
+  var card = _ref.card,
+    setCard = _ref.setCard,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? DEFAULT_CARD_CONTAINER_ID : _ref$id,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_SQUARE_CARD_OPTIONS : _ref$options,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var payments = useSquarePayment();
+  useEffect(function () {
+    var fetchCard = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var cardResponse;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return payments === null || payments === void 0 ? void 0 : payments.card();
+            case 2:
+              cardResponse = _context.sent;
+              _context.next = 5;
+              return cardResponse === null || cardResponse === void 0 ? void 0 : cardResponse.attach("#".concat(id));
+            case 5:
+              setCard(cardResponse || null);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchCard() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchCard();
+  }, [payments, id]);
+  useEffect(function () {
+    SQUARE_EVENTS.forEach(function (event) {
+      return card === null || card === void 0 ? void 0 : card.addEventListener(event, onChange);
     });
-    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(buildUrl(window.location.pathname, mergeLeft(newParams, queryParams)));
-  };
-  return {
-    isFilterButtonVisible: isFilterButtonVisible,
-    isFilterPaneOpen: isFilterPaneOpen,
-    pageProperties: pageProperties,
-    filters: filters,
-    searchTerm: searchTerm,
-    tabs: tabs,
-    tab: tab,
-    filterableColumns: filterableColumns,
-    dataSize: dataSize,
-    sortProperties: sortProperties,
-    setIsFilterButtonVisible: setIsFilterButtonVisible,
-    setIsFilterPaneOpen: setIsFilterPaneOpen,
-    setPageProperties: setPageProperties,
-    setSortProperties: setSortProperties,
-    setFilters: setFilters,
-    handleTabChange: handleTabChange,
-    setDataSize: setDataSize
-  };
+  }, [card, onChange]);
+  useEffect(function () {
+    card === null || card === void 0 || card.configure(options);
+  }, [card, options]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: id,
+    className: classNames({
+      "pointer-events-none": disabled,
+      "text-center": !card
+    })
+  }, !card && /*#__PURE__*/React__default.createElement(Spinner, null));
 };
 
-var TAB$1 = {
+var TAB = {
   all: "all",
   completed: "completed",
   pending: "pending",
   rejected: "rejected",
   failed: "failed"
 };
-var TABS$1 = Object.values(TAB$1);
+var TABS = Object.values(TAB);
 var TAB_METADATA = {
   all: {},
   completed: {},
@@ -6465,52 +6819,52 @@ var TAB_METADATA = {
   }
 };
 
-var defaultShow$1 = function defaultShow() {
+var defaultShow = function defaultShow() {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdable/account"));
 };
-var show$1 = function show(holdableId) {
+var show = function show(holdableId) {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdables/").concat(holdableId, "/account"));
 };
-var accountsApi$1 = {
-  show: show$1,
-  defaultShow: defaultShow$1
+var accountsApi = {
+  show: show,
+  defaultShow: defaultShow
 };
 
-var defaultList$2 = function defaultList(payload) {
+var defaultList$1 = function defaultList(payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdable/payments"), {
     params: payload
   });
 };
-var list$2 = function list(holdableId, payload) {
+var list$1 = function list(holdableId, payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdables/").concat(holdableId, "/payments"), {
     params: payload
   });
 };
-var paymentsApi$1 = {
-  defaultList: defaultList$2,
-  list: list$2
+var paymentsApi = {
+  defaultList: defaultList$1,
+  list: list$1
 };
 
-var defaultList$1 = function defaultList(payload) {
+var defaultList = function defaultList(payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdable/refunds"), {
     params: payload
   });
 };
-var list$1 = function list(holdableId, payload) {
+var list = function list(holdableId, payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/square/holdables/").concat(holdableId, "/refunds"), {
     params: payload
   });
 };
 var refundsapi = {
-  defaultList: defaultList$1,
-  list: list$1
+  defaultList: defaultList,
+  list: list
 };
 
 var useFetchSquareAccount = function useFetchSquareAccount(holdableId) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useQuery([QUERY_KEYS.SQUARE_ACCOUNT_DETAILS, holdableId], function () {
-    if (isPresent(holdableId)) return accountsApi$1.show(holdableId);
-    return accountsApi$1.defaultShow();
+    if (isPresent(holdableId)) return accountsApi.show(holdableId);
+    return accountsApi.defaultShow();
   }, options);
 };
 var useFetchSquarePayments = function useFetchSquarePayments() {
@@ -6518,8 +6872,8 @@ var useFetchSquarePayments = function useFetchSquarePayments() {
   var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return useQuery([QUERY_KEYS.SQUARE_PAYMENTS_LIST, payload], function () {
-    if (isPresent(holdableId)) return paymentsApi$1.list(holdableId, payload);
-    return paymentsApi$1.defaultList(payload);
+    if (isPresent(holdableId)) return paymentsApi.list(holdableId, payload);
+    return paymentsApi.defaultList(payload);
   }, options);
 };
 var useFetchSquareRefunds = function useFetchSquareRefunds() {
@@ -6577,245 +6931,26 @@ var List$1 = function List(_ref) {
   var _useFetchSquareAccoun = useFetchSquareAccount(holdableId),
     isSquareAccountLoading = _useFetchSquareAccoun.isLoading,
     _useFetchSquareAccoun2 = _useFetchSquareAccoun.data,
-    _useFetchSquareAccoun3 = _useFetchSquareAccoun2 === void 0 ? {} : _useFetchSquareAccoun2,
-    squareAccount = _useFetchSquareAccoun3.account;
-  var _useFetchSquareData = useFetchSquareData({
-      kind: kind,
-      holdableId: holdableId,
-      payload: buildPayload({
-        tab: tab,
-        filters: filters,
-        pageProperties: pageProperties,
-        sortProperties: sortProperties
-      })
-    }),
-    data = _useFetchSquareData.data,
-    isDataLoading = _useFetchSquareData.isDataLoading,
-    isDataFetching = _useFetchSquareData.isDataFetching,
-    dataSize = _useFetchSquareData.dataSize;
-  useEffect(function () {
-    setIsFilterButtonVisible(isPresent(data) || isPresent(filters));
-    setDataSize(dataSize);
-  }, [data]);
-  var handleTablePaginaton = function handleTablePaginaton(page, pageSize) {
-    var queryParams = getQueryParams({
-      toCamelCase: false
-    });
-    history.push(buildUrl(window.location.pathname, mergeLeft({
-      page: page,
-      page_size: pageSize
-    }, queryParams)));
-    setPageProperties(assoc(tab, {
-      page: page,
-      pageSize: pageSize
-    }));
-  };
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setSortProperties(isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
-      sortBy: camelToSnakeCase(sorter.field),
-      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
-    } : DEFAULT_SORT_PROPERTIES$1);
-  };
-  if (isSquareAccountLoading || isDataLoading) {
-    return /*#__PURE__*/React__default.createElement(PageLoader, null);
-  }
-  if (!(squareAccount !== null && squareAccount !== void 0 && squareAccount.isConnected) && dataSize <= 0 || !isPresent(data)) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default.createElement(NoData, {
-      title: tab === TAB$1.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
-        status: tab
-      })
-    }));
-  }
-  return /*#__PURE__*/React__default.createElement(TableWrapper, {
-    hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default.createElement(Table, {
-    columnData: columnData,
-    fixedHeight: true,
-    allowRowClick: false,
-    currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
-    handlePageChange: handleTablePaginaton,
-    loading: isDataFetching,
-    rowData: buildRowData({
-      data: data,
-      pageProperties: pageProperties,
-      tab: tab
-    }),
-    rowSelection: false,
-    sortDirections: SORT_DIRECTIONS,
-    totalCount: dataSize,
-    paginationProps: {
-      showSizeChanger: true,
-      hideOnSinglePage: true,
-      pageSize: (_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize,
-      total: dataSize
-    },
-    onChange: handleTableChange
-  }));
-};
-
-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 SquareDashboard = function SquareDashboard(_ref) {
-  var 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 ? "squarePayment" : _ref$kind;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var filterPaginationState = useFiltersAndPagination({
-    payableEntityColumns: payableEntityColumns,
-    kind: kind,
-    initialTabs: TABS$1,
-    tabMetaData: TAB_METADATA
-  });
-  var filters = filterPaginationState.filters,
-    setIsFilterButtonVisible = filterPaginationState.setIsFilterButtonVisible,
-    pageProperties = filterPaginationState.pageProperties,
-    setPageProperties = filterPaginationState.setPageProperties,
-    sortProperties = filterPaginationState.sortProperties,
-    setSortProperties = filterPaginationState.setSortProperties,
-    tab = filterPaginationState.tab,
-    setDataSize = filterPaginationState.setDataSize;
-  return /*#__PURE__*/React__default.createElement(FilterWrapper, _extends$1({
-    title: isPaymentKind(kind) ? t("neetoPayments.title.squarePayment") : t("neetoPayments.title.squareRefund")
-  }, _objectSpread$2({
-    headerProps: headerProps,
-    kind: kind,
-    searchProps: searchProps
-  }, filterPaginationState)), /*#__PURE__*/React__default.createElement(List$1, {
-    filters: filters,
-    holdableId: holdableId,
-    kind: kind,
-    pageProperties: pageProperties,
-    payableEntityColumns: payableEntityColumns,
-    setDataSize: setDataSize,
-    setIsFilterButtonVisible: setIsFilterButtonVisible,
-    setPageProperties: setPageProperties,
-    setSortProperties: setSortProperties,
-    sortProperties: sortProperties,
-    tab: tab
-  }));
-};
-var index$1 = withTitle(withReactQuery(SquareDashboard), t$1("neetoPayments.common.squarePayments"));
-
-var TAB = {
-  all: "all",
-  successful: "successful",
-  declined: "declined",
-  refunded: "refunded"
-};
-var TABS = Object.values(TAB);
-
-var defaultShow = function defaultShow() {
-  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdable/account"));
-};
-var show = function show(holdableId) {
-  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdables/").concat(holdableId, "/account"));
-};
-var accountsApi = {
-  defaultShow: defaultShow,
-  show: show
-};
-
-var useFetchRazorpayAccount = function useFetchRazorpayAccount(holdableId) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.SQUARE_ACCOUNT_DETAILS, holdableId], function () {
-    if (isPresent(holdableId)) return accountsApi.show(holdableId);
-    return accountsApi.defaultShow();
-  }, options);
-};
-
-var create$1 = function create(payload) {
-  return axios.post("".concat(BASE_URL, "/api/v1/public/razorpay/payments"), {
-    payment: payload
-  });
-};
-var defaultList = function defaultList(payload) {
-  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdable/payments"), {
-    params: payload
-  });
-};
-var list = function list(holdableId, payload) {
-  return axios.get("".concat(BASE_URL, "/api/v1/razorpay/holdables/").concat(holdableId, "/payments"), {
-    params: payload
-  });
-};
-var paymentsApi = {
-  defaultList: defaultList,
-  list: list,
-  create: create$1
-};
-
-var useFetchRazorpayPayments = function useFetchRazorpayPayments() {
-  var holdableId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return useQuery([QUERY_KEYS.SQUARE_PAYMENTS_LIST, payload], function () {
-    if (isPresent(holdableId)) return paymentsApi.list(holdableId, payload);
-    return paymentsApi.defaultList(payload);
-  }, options);
-};
-var useCreateRazorpayPayment = function useCreateRazorpayPayment(options) {
-  return useMutation(paymentsApi.create, options);
-};
-
-var List = function List(_ref) {
-  var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
-  var holdableId = _ref.holdableId,
-    kind = _ref.kind,
-    filters = _ref.filters,
-    setIsFilterButtonVisible = _ref.setIsFilterButtonVisible,
-    pageProperties = _ref.pageProperties,
-    payableEntityColumns = _ref.payableEntityColumns,
-    setPageProperties = _ref.setPageProperties,
-    tab = _ref.tab,
-    sortProperties = _ref.sortProperties,
-    setSortProperties = _ref.setSortProperties,
-    setDataSize = _ref.setDataSize;
-  var history = useHistory();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var columnData = buildPaymentColumns$1({
-    tab: tab,
-    kind: kind,
-    payableEntityColumns: payableEntityColumns
-  });
-  var _useFetchRazorpayAcco = useFetchRazorpayAccount(),
-    isAccountLoading = _useFetchRazorpayAcco.isLoading,
-    _useFetchRazorpayAcco2 = _useFetchRazorpayAcco.data,
-    _useFetchRazorpayAcco3 = _useFetchRazorpayAcco2 === void 0 ? {} : _useFetchRazorpayAcco2,
-    account = _useFetchRazorpayAcco3.account;
-  var payload = buildPayload({
-    tab: tab,
-    filters: filters,
-    pageProperties: pageProperties,
-    sortProperties: sortProperties
-  });
-  var _useHiddenColumns = useHiddenColumns("paymentDashboard_".concat(kind)),
-    hideColumn = _useHiddenColumns.hideColumn,
-    _useHiddenColumns$hid = _useHiddenColumns.hiddenColumns,
-    hiddenColumns = _useHiddenColumns$hid === void 0 ? [] : _useHiddenColumns$hid;
-  var _useFetchRazorpayPaym = useFetchRazorpayPayments(holdableId, payload, {
-      enabled: isPaymentKind$1(kind)
+    _useFetchSquareAccoun3 = _useFetchSquareAccoun2 === void 0 ? {} : _useFetchSquareAccoun2,
+    squareAccount = _useFetchSquareAccoun3.account;
+  var _useFetchSquareData = useFetchSquareData({
+      kind: kind,
+      holdableId: holdableId,
+      payload: buildPayload({
+        tab: tab,
+        filters: filters,
+        pageProperties: pageProperties,
+        sortProperties: sortProperties
+      })
     }),
-    _useFetchRazorpayPaym2 = _useFetchRazorpayPaym.data,
-    _useFetchRazorpayPaym3 = _useFetchRazorpayPaym2 === void 0 ? {} : _useFetchRazorpayPaym2,
-    payments = _useFetchRazorpayPaym3.payments,
-    _useFetchRazorpayPaym4 = _useFetchRazorpayPaym3.views,
-    views = _useFetchRazorpayPaym4 === void 0 ? {} : _useFetchRazorpayPaym4,
-    isPaymentsLoaidng = _useFetchRazorpayPaym.isLoading,
-    isFetching = _useFetchRazorpayPaym.isFetching;
+    data = _useFetchSquareData.data,
+    isDataLoading = _useFetchSquareData.isDataLoading,
+    isDataFetching = _useFetchSquareData.isDataFetching,
+    dataSize = _useFetchSquareData.dataSize;
   useEffect(function () {
-    setIsFilterButtonVisible(isPresent(payments) || isPresent(filters));
-    setDataSize(views[tab]);
-  }, [payments]);
+    setIsFilterButtonVisible(isPresent(data) || isPresent(filters));
+    setDataSize(dataSize);
+  }, [data]);
   var handleTablePaginaton = function handleTablePaginaton(page, pageSize) {
     var queryParams = getQueryParams({
       toCamelCase: false
@@ -6835,14 +6970,10 @@ var List = function List(_ref) {
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
     } : DEFAULT_SORT_PROPERTIES$1);
   };
-  var visibleColumns = columnData.filter(function (_ref2) {
-    var dataIndex = _ref2.dataIndex;
-    return !hiddenColumns.includes(processDataIndex(dataIndex));
-  });
-  if (isAccountLoading || isPaymentsLoaidng) {
+  if (isSquareAccountLoading || isDataLoading) {
     return /*#__PURE__*/React__default.createElement(PageLoader, null);
   }
-  if (!(account !== null && account !== void 0 && account.isConnected) && views <= 0 || !isPresent(payments)) {
+  if (!(squareAccount !== null && squareAccount !== void 0 && squareAccount.isConnected) && dataSize <= 0 || !isPresent(data)) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React__default.createElement(NoData, {
@@ -6852,38 +6983,35 @@ var List = function List(_ref) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(TableWrapper, {
-    hasPagination: views > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
+    hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
   }, /*#__PURE__*/React__default.createElement(Table, {
+    columnData: columnData,
     fixedHeight: true,
     allowRowClick: false,
-    columnData: visibleColumns,
     currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
     handlePageChange: handleTablePaginaton,
-    loading: isFetching,
+    loading: isDataFetching,
     rowData: buildRowData({
-      data: payments,
+      data: data,
       pageProperties: pageProperties,
       tab: tab
     }),
     rowSelection: false,
     sortDirections: SORT_DIRECTIONS,
-    totalCount: views,
+    totalCount: dataSize,
     paginationProps: {
       showSizeChanger: true,
       hideOnSinglePage: true,
       pageSize: (_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize,
-      total: views
+      total: dataSize
     },
-    onChange: handleTableChange,
-    onColumnHide: function onColumnHide(columnData) {
-      hideColumn(processDataIndex(columnData.dataIndex));
-    }
+    onChange: handleTableChange
   }));
 };
 
 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 RazorpayDashboard = function RazorpayDashboard(_ref) {
+var SquareDashboard = function SquareDashboard(_ref) {
   var searchProps = _ref.searchProps,
     _ref$headerProps = _ref.headerProps,
     headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
@@ -6892,18 +7020,14 @@ var RazorpayDashboard = function RazorpayDashboard(_ref) {
     _ref$payableEntityCol = _ref.payableEntityColumns,
     payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
     _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? "razorpayPayment" : _ref$kind;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showExportModal = _useState2[0],
-    setShowExportModal = _useState2[1];
+    kind = _ref$kind === void 0 ? "squarePayment" : _ref$kind;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var filterPaginationState = useFiltersAndPagination({
     payableEntityColumns: payableEntityColumns,
     kind: kind,
     initialTabs: TABS,
-    tabMetaData: {}
+    tabMetaData: TAB_METADATA
   });
   var filters = filterPaginationState.filters,
     setIsFilterButtonVisible = filterPaginationState.setIsFilterButtonVisible,
@@ -6914,14 +7038,12 @@ var RazorpayDashboard = function RazorpayDashboard(_ref) {
     tab = filterPaginationState.tab,
     setDataSize = filterPaginationState.setDataSize;
   return /*#__PURE__*/React__default.createElement(FilterWrapper, _extends$1({
-    title: t("neetoPayments.common.razorpayPayments")
+    title: isPaymentKind(kind) ? t("neetoPayments.title.squarePayment") : t("neetoPayments.title.squareRefund")
   }, _objectSpread$1({
     headerProps: headerProps,
     kind: kind,
-    payableEntityColumns: payableEntityColumns,
-    searchProps: searchProps,
-    setShowExportModal: setShowExportModal
-  }, filterPaginationState)), /*#__PURE__*/React__default.createElement(List, {
+    searchProps: searchProps
+  }, filterPaginationState)), /*#__PURE__*/React__default.createElement(List$1, {
     filters: filters,
     holdableId: holdableId,
     kind: kind,
@@ -6930,235 +7052,39 @@ var RazorpayDashboard = function RazorpayDashboard(_ref) {
     setDataSize: setDataSize,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setPageProperties: setPageProperties,
-    setSortProperties: setSortProperties,
-    sortProperties: sortProperties,
-    tab: tab
-  }), /*#__PURE__*/React__default.createElement(ExportModal$1, {
-    filters: filters,
-    holdableId: holdableId,
-    kind: kind,
-    setShowExportModal: setShowExportModal,
-    showExportModal: showExportModal,
-    sortProperties: sortProperties,
-    tab: tab
-  }));
-};
-var index = withTitle(withReactQuery(RazorpayDashboard), t$1("neetoPayments.common.razorpayPayments"));
-
-var STRIPE_ALERT_PAYMENT_KIND_CONTENT = {
-  standard: {
-    title: t$1("neetoPayments.alert.stripe.connectRestrictionTitle"),
-    message: t$1("neetoPayments.alert.stripe.connectRestrictionMessage")
-  },
-  platform: {
-    title: t$1("neetoPayments.alert.stripePlatform.connectRestrictionTitle"),
-    message: t$1("neetoPayments.alert.stripePlatform.connectRestrictionMessage")
-  }
-};
-
-var _excluded = ["isOpen", "paymentKind", "onClose"];
-var PaymentKindRestrictionAlert = function PaymentKindRestrictionAlert(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    _ref$paymentKind = _ref.paymentKind,
-    paymentKind = _ref$paymentKind === void 0 ? "standard" : _ref$paymentKind,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement(Alert, _extends$1({
-    isOpen: isOpen,
-    onClose: onClose,
-    message: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].message,
-    title: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].title
-  }, otherProps));
-};
-
-var useSquareCard = function useSquareCard() {
-  var _useState = useState(function () {
-      return undefined;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    card = _useState2[0],
-    setCard = _useState2[1];
-  var tokenizeCard = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var result, message;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (card) {
-              _context.next = 3;
-              break;
-            }
-            logger.warn("Credit Card button was clicked, but no Credit Card instance was found.");
-            return _context.abrupt("return", "");
-          case 3:
-            _context.prev = 3;
-            _context.next = 6;
-            return card.tokenize();
-          case 6:
-            result = _context.sent;
-            if (!(result !== null && result !== void 0 && result.errors)) {
-              _context.next = 10;
-              break;
-            }
-            message = "Status: ".concat(result.status, " and Errors: ").concat(JSON.stringify(result === null || result === void 0 ? void 0 : result.errors));
-            throw new Error(message);
-          case 10:
-            return _context.abrupt("return", result === null || result === void 0 ? void 0 : result.token);
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](3);
-            logger.error(_context.t0);
-            return _context.abrupt("return", "");
-          case 17:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[3, 13]]);
-    }));
-    return function tokenizeCard() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  return {
-    card: card,
-    setCard: setCard,
-    tokenizeCard: tokenizeCard
-  };
-};
-
-var loadScript$1 = function loadScript(src) {
-  return new Promise(function (resolve) {
-    var script = document.createElement("script");
-    script.src = src;
-    script.onload = function () {
-      resolve(true);
-    };
-    script.onerror = function () {
-      resolve(false);
-    };
-    document.body.appendChild(script);
-  });
-};
-var useRazorpayPayment = function useRazorpayPayment(_ref) {
-  var payableId = _ref.payableId,
-    _ref$onBeforePayment = _ref.onBeforePayment,
-    onBeforePayment = _ref$onBeforePayment === void 0 ? noop : _ref$onBeforePayment,
-    _ref$onSuccessfulPaym = _ref.onSuccessfulPayment,
-    onSuccessfulPayment = _ref$onSuccessfulPaym === void 0 ? noop : _ref$onSuccessfulPaym,
-    _ref$onFailedPayment = _ref.onFailedPayment,
-    onFailedPayment = _ref$onFailedPayment === void 0 ? noop : _ref$onFailedPayment;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var openRazorpayCheckout = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
-      var script, checkout;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return loadScript$1("https://checkout.razorpay.com/v1/checkout.js");
-          case 2:
-            script = _context.sent;
-            if (script) {
-              _context.next = 6;
-              break;
-            }
-            logger.error(t("neetoPayments.razorpay.loadError"));
-            return _context.abrupt("return");
-          case 6:
-            checkout = new window.Razorpay(options);
-            checkout.open();
-          case 8:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function openRazorpayCheckout(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var handlePayment = function handlePayment(response) {
-    if (isNotPresent(response === null || response === void 0 ? void 0 : response.razorpay_signature)) {
-      onFailedPayment();
-      return;
-    }
-    onSuccessfulPayment();
-  };
-  var handleSuccess = function handleSuccess(_ref3) {
-    var payment = _ref3.payment;
-    if ((payment === null || payment === void 0 ? void 0 : payment.status) === "successful") {
-      return onSuccessfulPayment();
-    }
-    var options = {
-      key: payment.publicKey,
-      order_id: payment.orderIdentifier,
-      customer_id: payment.customerIdentifier,
-      modal: {
-        confirm_close: true,
-        ondismiss: onFailedPayment
-      },
-      handler: handlePayment
-    };
-    return openRazorpayCheckout(mergeDeepLeft(RAZORPAY_PAYMENT_BUTTON_OPTIONS, options));
-  };
-  var _useCreateRazorpayPay = useCreateRazorpayPayment({
-      onSuccess: handleSuccess
-    }),
-    createRazorpayOrder = _useCreateRazorpayPay.mutate;
-  var makePayment = function makePayment() {
-    onBeforePayment();
-    createRazorpayOrder({
-      payableId: payableId
-    });
-  };
-  return {
-    makePayment: makePayment
-  };
+    setSortProperties: setSortProperties,
+    sortProperties: sortProperties,
+    tab: tab
+  }));
 };
+var index = withTitle(withReactQuery(SquareDashboard), t$1("neetoPayments.common.squarePayments"));
 
-var useStripePromise = function useStripePromise(stripeAccountIdentifier) {
-  var stripePromise = useMemo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var stripeJs, _yield$stripeJs, loadStripe;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!isNotPresent(stripeAccountIdentifier)) {
-            _context.next = 2;
-            break;
-          }
-          return _context.abrupt("return", null);
-        case 2:
-          stripeJs = function stripeJs() {
-            return import('./stripe.esm-115c767d.js');
-          };
-          _context.prev = 3;
-          _context.next = 6;
-          return stripeJs();
-        case 6:
-          _yield$stripeJs = _context.sent;
-          loadStripe = _yield$stripeJs.loadStripe;
-          _context.next = 10;
-          return loadStripe(globalProps === null || globalProps === void 0 ? void 0 : globalProps.stripePublishableKey, {
-            stripeAccount: stripeAccountIdentifier
-          });
-        case 10:
-          return _context.abrupt("return", _context.sent);
-        case 13:
-          _context.prev = 13;
-          _context.t0 = _context["catch"](3);
-          logger.error(_context.t0);
-        case 16:
-          return _context.abrupt("return", null);
-        case 17:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[3, 13]]);
-  })), [stripeAccountIdentifier]);
-  return stripePromise;
+var STRIPE_ALERT_PAYMENT_KIND_CONTENT = {
+  standard: {
+    title: t$1("neetoPayments.alert.stripe.connectRestrictionTitle"),
+    message: t$1("neetoPayments.alert.stripe.connectRestrictionMessage")
+  },
+  platform: {
+    title: t$1("neetoPayments.alert.stripePlatform.connectRestrictionTitle"),
+    message: t$1("neetoPayments.alert.stripePlatform.connectRestrictionMessage")
+  }
+};
+
+var _excluded = ["isOpen", "paymentKind", "onClose"];
+var PaymentKindRestrictionAlert = function PaymentKindRestrictionAlert(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$paymentKind = _ref.paymentKind,
+    paymentKind = _ref$paymentKind === void 0 ? "standard" : _ref$paymentKind,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(Alert, _extends$1({
+    isOpen: isOpen,
+    onClose: onClose,
+    message: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].message,
+    title: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].title
+  }, otherProps));
 };
 
 var _path, _path2, _path3;
@@ -7198,7 +7124,7 @@ var INITIAL_VALUES = {
   country: "",
   return_url: ""
 };
-var VALIDATION_SCHEMA = yup.object().shape({
+var VALIDATION_SCHEMA$1 = yup.object().shape({
   country: yup.object().required(t$1("neetoPayments.validations.countryRequired")),
   returnUrl: yup.string().url(t$1("neetoPayments.validations.invalidUrl"))
 });
@@ -7303,7 +7229,7 @@ var AccountForm = function AccountForm(_ref) {
     formikProps: {
       enableReinitialize: true,
       initialValues: INITIAL_VALUES,
-      validationSchema: VALIDATION_SCHEMA,
+      validationSchema: VALIDATION_SCHEMA$1,
       onSubmit: handleSubmit
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9206,6 +9132,141 @@ var StripeConnect = function StripeConnect(_ref) {
   }));
 };
 
+var VALIDATION_SCHEMA = yup.object({
+  upiId: yup.string().matches(/^[a-zA-Z0-9.-]{2,256}@[a-zA-Z0-9][a-zA-Z0-9-]{1,63}$/, t$1("neetoPayments.upi.form.validation.invalidUpi")).required(t$1("neetoPayments.upi.form.validation.required"))
+});
+
+var Add = withT(function (_ref) {
+  var t = _ref.t,
+    handleCreateUpiId = _ref.handleCreateUpiId;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Form, {
+    formikProps: {
+      initialValues: {
+        upiId: ""
+      },
+      onSubmit: handleCreateUpiId,
+      validationSchema: VALIDATION_SCHEMA
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-3"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "w-64",
+    label: t("neetoPayments.common.upiId"),
+    name: "upiId"
+  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    label: t("neetoPayments.upi.form.add"),
+    type: "submit"
+  }))));
+});
+
+var getColumnData = function getColumnData(handleDeleteClick) {
+  return [{
+    title: t$1("neetoPayments.common.upiId"),
+    dataIndex: "address",
+    key: "address",
+    width: 272,
+    render: function render(_, upiId) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex items-center justify-between gap-3"
+      }, /*#__PURE__*/React__default.createElement(Typography, {
+        className: "w-4/5",
+        style: "body2"
+      }, upiId.address), /*#__PURE__*/React__default.createElement(MoreDropdown, {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: [{
+          key: "delete-meeting",
+          label: t$1("neetoPayments.common.delete"),
+          onClick: function onClick() {
+            return handleDeleteClick(upiId);
+          }
+        }]
+      }));
+    }
+  }, {
+    title: t$1("neetoPayments.common.createdAt"),
+    dataIndex: "createdAt",
+    key: "createdAt",
+    render: dateFormat.dateTime
+  }];
+};
+
+var List = function List(_ref) {
+  var handleDeleteUpiId = _ref.handleDeleteUpiId,
+    upiIds = _ref.upiIds;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlertOpen = _useState2[0],
+    setIsAlertOpen = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedUpiId = _useState4[0],
+    setSelectedUpiId = _useState4[1];
+  var handleOpenDeleteModal = function handleOpenDeleteModal(id) {
+    setSelectedUpiId(id);
+    setIsAlertOpen(true);
+  };
+  var handleAlertClose = function handleAlertClose() {
+    setSelectedUpiId({});
+    setIsAlertOpen(false);
+  };
+  var handleAlertSubmit = function handleAlertSubmit() {
+    handleDeleteUpiId(selectedUpiId);
+    setIsAlertOpen(false);
+  };
+  if (isEmpty(upiIds)) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, {
+    columnData: getColumnData(handleOpenDeleteModal),
+    rowData: upiIds
+  }), /*#__PURE__*/React__default.createElement(Alert, {
+    isOpen: isAlertOpen,
+    title: t("neetoPayments.upi.alert.title"),
+    message: /*#__PURE__*/React__default.createElement(Trans, {
+      components: {
+        b: /*#__PURE__*/React__default.createElement("strong", null)
+      },
+      i18nKey: "neetoPayments.upi.alert.message",
+      values: {
+        upiId: selectedUpiId.address
+      }
+    }),
+    onClose: handleAlertClose,
+    onSubmit: handleAlertSubmit
+  }));
+};
+
+var UpiConnect = function UpiConnect(_ref) {
+  var _ref$upiIds = _ref.upiIds,
+    upiIds = _ref$upiIds === void 0 ? [] : _ref$upiIds,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isDeleting = _ref.isDeleting,
+    isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
+    _ref$handleDeleteUpiI = _ref.handleDeleteUpiId,
+    handleDeleteUpiId = _ref$handleDeleteUpiI === void 0 ? noop : _ref$handleDeleteUpiI,
+    _ref$handleCreateUpiI = _ref.handleCreateUpiId,
+    handleCreateUpiId = _ref$handleCreateUpiI === void 0 ? noop : _ref$handleCreateUpiI;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isLoading) return /*#__PURE__*/React__default.createElement(Spinner, null);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full max-w-3xl flex-col items-start space-y-6"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h2"
+  }, t("neetoPayments.common.upiIds")), /*#__PURE__*/React__default.createElement(Add, {
+    handleCreateUpiId: handleCreateUpiId
+  }), /*#__PURE__*/React__default.createElement(List, {
+    handleDeleteUpiId: handleDeleteUpiId,
+    isDeleting: isDeleting,
+    upiIds: upiIds
+  }));
+};
+
 var loadScript = function loadScript(src) {
   return new Promise(function (resolve) {
     var script = document.createElement("script");
@@ -9219,14 +9280,8 @@ var loadScript = function loadScript(src) {
     document.body.appendChild(script);
   });
 };
-var RazorpayPaymentButton = function RazorpayPaymentButton(_ref) {
-  var label = _ref.label,
-    payableId = _ref.payableId,
-    discountCode = _ref.discountCode,
-    email = _ref.email,
-    name = _ref.name,
-    _ref$isCardPreservabl = _ref.isCardPreservable,
-    isCardPreservable = _ref$isCardPreservabl === void 0 ? false : _ref$isCardPreservabl,
+var useRazorpayPayment = function useRazorpayPayment(_ref) {
+  var payableId = _ref.payableId,
     _ref$onBeforePayment = _ref.onBeforePayment,
     onBeforePayment = _ref$onBeforePayment === void 0 ? noop : _ref$onBeforePayment,
     _ref$onSuccessfulPaym = _ref.onSuccessfulPayment,
@@ -9276,16 +9331,10 @@ var RazorpayPaymentButton = function RazorpayPaymentButton(_ref) {
     if ((payment === null || payment === void 0 ? void 0 : payment.status) === "successful") {
       return onSuccessfulPayment();
     }
-    var save = isCardPreservable ? 1 : 0;
     var options = {
-      save: save,
       key: payment.publicKey,
       order_id: payment.orderIdentifier,
       customer_id: payment.customerIdentifier,
-      prefill: {
-        name: name,
-        email: email
-      },
       modal: {
         confirm_close: true,
         ondismiss: onFailedPayment
@@ -9297,26 +9346,113 @@ var RazorpayPaymentButton = function RazorpayPaymentButton(_ref) {
   var _useCreateRazorpayPay = useCreateRazorpayPayment({
       onSuccess: handleSuccess
     }),
-    isLoading = _useCreateRazorpayPay.isLoading,
     createRazorpayOrder = _useCreateRazorpayPay.mutate;
-  var handleClick = function handleClick() {
+  var makePayment = function makePayment() {
     onBeforePayment();
-    var payload = {
-      payableId: payableId,
-      discountCode: discountCode,
-      customerAttributes: {
-        email: email,
-        name: name
-      }
+    createRazorpayOrder({
+      payableId: payableId
+    });
+  };
+  return {
+    makePayment: makePayment
+  };
+};
+
+var useSquareCard = function useSquareCard() {
+  var _useState = useState(function () {
+      return undefined;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    card = _useState2[0],
+    setCard = _useState2[1];
+  var tokenizeCard = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result, message;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (card) {
+              _context.next = 3;
+              break;
+            }
+            logger.warn("Credit Card button was clicked, but no Credit Card instance was found.");
+            return _context.abrupt("return", "");
+          case 3:
+            _context.prev = 3;
+            _context.next = 6;
+            return card.tokenize();
+          case 6:
+            result = _context.sent;
+            if (!(result !== null && result !== void 0 && result.errors)) {
+              _context.next = 10;
+              break;
+            }
+            message = "Status: ".concat(result.status, " and Errors: ").concat(JSON.stringify(result === null || result === void 0 ? void 0 : result.errors));
+            throw new Error(message);
+          case 10:
+            return _context.abrupt("return", result === null || result === void 0 ? void 0 : result.token);
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](3);
+            logger.error(_context.t0);
+            return _context.abrupt("return", "");
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 13]]);
+    }));
+    return function tokenizeCard() {
+      return _ref.apply(this, arguments);
     };
-    createRazorpayOrder(payload);
+  }();
+  return {
+    card: card,
+    setCard: setCard,
+    tokenizeCard: tokenizeCard
   };
-  return /*#__PURE__*/React__default.createElement(Button, {
-    disabled: isLoading,
-    label: label || t("neetoPayments.common.pay"),
-    loading: isLoading,
-    onClick: handleClick
-  });
+};
+
+var useStripePromise = function useStripePromise(stripeAccountIdentifier) {
+  var stripePromise = useMemo( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var stripeJs, _yield$stripeJs, loadStripe;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isNotPresent(stripeAccountIdentifier)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 2:
+          stripeJs = function stripeJs() {
+            return import('./stripe.esm-115c767d.js');
+          };
+          _context.prev = 3;
+          _context.next = 6;
+          return stripeJs();
+        case 6:
+          _yield$stripeJs = _context.sent;
+          loadStripe = _yield$stripeJs.loadStripe;
+          _context.next = 10;
+          return loadStripe(globalProps === null || globalProps === void 0 ? void 0 : globalProps.stripePublishableKey, {
+            stripeAccount: stripeAccountIdentifier
+          });
+        case 10:
+          return _context.abrupt("return", _context.sent);
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](3);
+          logger.error(_context.t0);
+        case 16:
+          return _context.abrupt("return", null);
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[3, 13]]);
+  })), [stripeAccountIdentifier]);
+  return stripePromise;
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
@@ -9324,5 +9460,5 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css = ".ant-table-cell-row-hover .identifier-copy-button{visibility:visible!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19jb3B5LWJ1dHRvbi5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL21haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSxrREFDRSw0QkNBSiIsInNvdXJjZXNDb250ZW50IjpbIi5hbnQtdGFibGUtY2VsbC1yb3ctaG92ZXIge1xuICAuaWRlbnRpZmllci1jb3B5LWJ1dHRvbiB7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIuYW50LXRhYmxlLWNlbGwtcm93LWhvdmVyIC5pZGVudGlmaWVyLWNvcHktYnV0dG9uIHtcbiAgdmlzaWJpbGl0eTogdmlzaWJsZSAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
 
-export { index$3 as AccountsDashboard, CURRENCY_OPTIONS, Dashboard$1 as Dashboard, PaymentKindRestrictionAlert, index$2 as PayoutsDashboard, PayoutsPage, index as RazorpayDashboard, RazorpayPaymentButton, SquareCard, index$1 as SquareDashboard, StripeConnect, buildStripeTransactionLink, useRazorpayPayment, useSquareCard, useStripePromise };
+export { index$3 as AccountsDashboard, CURRENCY_OPTIONS, Dashboard$1 as Dashboard, PaymentKindRestrictionAlert, index$2 as PayoutsDashboard, PayoutsPage, index$1 as RazorpayDashboard, RazorpayPaymentButton, SquareCard, index as SquareDashboard, StripeConnect, UpiConnect, buildStripeTransactionLink, useRazorpayPayment, useSquareCard, useStripePromise };
 //# sourceMappingURL=index.js.map