@bigbinary/neeto-payments-frontend 1.3.5 → 1.3.7

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

@@ -42,7 +42,7 @@
       "disconnected": "Disconnected",
       "incomplete": "Incomplete",
       "paid": "Paid",
-      "in_transit": "In transit",
+      "inTransit": "In transit",
       "canceled": "Canceled",
       "arrivalDate": "Arrival date",
       "destinationIdentifier": "Destination identifier"
@@ -69,10 +69,26 @@
       "payouts": "Stripe payouts"
     },
     "emptyState": {
-      "payment": "There are no payments to show.",
-      "refund": "There are no refunds to show.",
-      "account": "There are no standard accounts to show.",
-      "payouts": "There are no payouts to show."
+      "connected": "There are no transactions.",
+      "connectedWithStatus": "There are no {{status}} transactions.",
+      "platform": "There are no transactions.",
+      "platformWithStatus": "There are no {{status}} transactions.",
+      "split": "There are no split transfers.",
+      "splitWithStatus": "There are no {{status}} split transfers.",
+      "transfer": "There are no transactions.",
+      "transferWithStatus": "There are no {{status}} transactions.",
+      "refund": "There are no refunds.",
+      "refundWithStatus": "There are no {{status}} refunds.",
+      "account": "There are no standard accounts.",
+      "accountWithStatus": "There are no {{status}} standard accounts.",
+      "payouts": {
+        "all": "There are no payouts to show.",
+        "paid": "There are no paid payouts.",
+        "inTransit": "There are no payouts in transit.",
+        "canceled": "There are no canceled payouts.",
+        "pending": "There are no pending payouts.",
+        "failed": "There are no failed payouts."
+      }
     },
     "tagLabels": {
       "account": {
@@ -82,7 +98,7 @@
       },
       "payout": {
         "paid": "paid",
-        "in_transit": "in transit",
+        "inTransit": "in transit",
         "canceled": "canceled",
         "pending": "pending",
         "failed": "failed"
@@ -156,7 +172,7 @@
       },
       "payout": {
         "paid": "The payout has been paid",
-        "in_transit": "The payout is in transit",
+        "inTransit": "The payout is in transit",
         "canceled": "The payout has been canceled",
         "pending": "The payout is pending",
         "failed": "The payout has failed"
@@ -183,22 +199,36 @@
     "countOf": {
       "platform": "{{count}} transaction",
       "platform_other": "{{count}} transactions",
+      "platformWithStatus": "{{count}} {{status}} transaction",
+      "platformWithStatus_other": "{{count}} {{status}} transactions",
       "split": "{{count}} split transfer",
       "split_other": "{{count}} split transfers",
+      "splitWithStatus": "{{count}} {{status}} split transfer",
+      "splitWithStatus_other": "{{count}} {{status}} split transfers",
       "transfer": "{{count}} transaction",
       "transfer_other": "{{count}} transactions",
+      "transferWithStatus": "{{count}} {{status}} transaction",
+      "transferWithStatus_other": "{{count}} {{status}} transactions",
       "connected": "{{count}} transaction",
       "connected_other": "{{count}} transactions",
+      "connectedWithStatus": "{{count}} {{status}} transaction",
+      "connectedWithStatus_other": "{{count}} {{status}} transactions",
       "refund": "{{count}} refund",
       "refund_other": "{{count}} refunds",
+      "refundWithStatus": "{{count}} {{status}} refund",
+      "refundWithStatus_other": "{{count}} {{status}} refunds",
       "squarePayment": "{{count}} payment",
       "squarePayment_other": "{{count}} payments",
       "squareRefund": "{{count}} refund",
       "squareRefund_other": "{{count}} refunds",
       "account": "{{count}} standard account",
       "account_other": "{{count}} standard accounts",
+      "accountWithStatus": "{{count}} {{status}} standard account",
+      "accountWithStatus_other": "{{count}} {{status}} standard accounts",
       "payout": "{{count}} payout",
-      "payout_other": "{{count}} payouts"
+      "payout_other": "{{count}} payouts",
+      "payoutWithStatus": "{{count}} {{status}} payout",
+      "payoutWithStatus_other": "{{count}} {{status}} payouts"
     },
     "export": {
       "title": {

package/dist/index.cjs.js

@@ -18,13 +18,13 @@ var axios = require('axios');
 var neetocist = require('neetocist');
 var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
 var reactRouterDom = require('react-router-dom');
+var neetoCist = require('@bigbinary/neeto-cist');
 var ramda = require('ramda');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var require$$0 = require('util');
-var neetoCist = require('@bigbinary/neeto-cist');
 var reactRouterDom$1 = require('react-router-dom/cjs/react-router-dom');
 var classNames = require('classnames');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
@@ -618,7 +618,7 @@ var TAG_STYLE = {
   completed: "success",
   rejected: "danger"
 };
-var DEFAULT_SORT_PROPERTIES = {
+var DEFAULT_SORT_PROPERTIES$1 = {
   sortBy: "updated_at",
   orderBy: "DESC"
 };
@@ -827,7 +827,7 @@ var buildPayload = function buildPayload(_ref) {
     _ref$payoutId = _ref.payoutId,
     payoutId = _ref$payoutId === void 0 ? null : _ref$payoutId;
   return _objectSpread$8({
-    tab: tab,
+    tab: neetoCist.camelToSnakeCase(tab),
     payoutId: payoutId,
     page: (_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page,
     pageSize: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize,
@@ -875,7 +875,7 @@ var preProcessStatus = function preProcessStatus(type, status) {
   if (status === "voided") {
     return "incomplete";
   }
-  return status;
+  return neetoCist.snakeToCamelCase(status);
 };
 var renderStatus = ramda.curry(function (type, status, record) {
   var processedStatus = preProcessStatus(type, status, record);
@@ -1000,7 +1000,7 @@ var useFiltersAndPagination$3 = function useFiltersAndPagination() {
     _useState6 = _slicedToArray(_useState5, 2),
     pageProperties = _useState6[0],
     setPageProperties = _useState6[1];
-  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES),
+  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES$1),
     _useState8 = _slicedToArray(_useState7, 2),
     sortProperties = _useState8[0],
     setSortProperties = _useState8[1];
@@ -1136,6 +1136,7 @@ var List$3 = function List(_ref) {
     setDataSize(dataSize);
   }, [accounts]);
   var handleTablePagination = function handleTablePagination(page, pageSize) {
+    urlSearchParams.set("tab", tab);
     urlSearchParams.set("page", page);
     urlSearchParams.set("page_size", pageSize);
     history.push({
@@ -1148,7 +1149,7 @@ var List$3 = function List(_ref) {
   };
   React.useEffect(function () {
     handleTablePagination(constants.DEFAULT_PAGE_INDEX, constants.DEFAULT_PAGE_SIZE);
-    setSortProperties(DEFAULT_SORT_PROPERTIES);
+    setSortProperties(DEFAULT_SORT_PROPERTIES$1);
   }, [filters, tab]);
   React.useEffect(function () {
     var _pageProperties$tab, _pageProperties$tab2;
@@ -1164,7 +1165,7 @@ var List$3 = function List(_ref) {
     setSortProperties(neetocist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
       sortBy: neetocist.camelToSnakeCase(sorter.field),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
-    } : DEFAULT_SORT_PROPERTIES);
+    } : DEFAULT_SORT_PROPERTIES$1);
   };
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
@@ -1173,7 +1174,9 @@ var List$3 = function List(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
-      title: t("neetoPayments.emptyState.account")
+      title: tab === TAB$3.all ? t("neetoPayments.emptyState.account") : t("neetoPayments.emptyState.accountWithStatus", {
+        status: tab
+      })
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
@@ -1258,8 +1261,11 @@ var AccountsDashboard = function AccountsDashboard() {
     leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
-    }, t("neetoPayments.countOf.account", {
+    }, tab === TAB$3.all ? t("neetoPayments.countOf.account", {
       count: dataSize
+    }) : t("neetoPayments.countOf.accountWithStatus", {
+      count: dataSize,
+      status: tab
     })),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
       columns: FILTER_COLUMNS$3,
@@ -1589,8 +1595,9 @@ var COLUMNS$2 = [{
   dataIndex: "refunds",
   key: "refundsTime",
   width: "220px",
-  render: function render(refunds) {
+  render: function render() {
     var _refunds$;
+    var refunds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return renderDate((_refunds$ = refunds[0]) === null || _refunds$ === void 0 ? void 0 : _refunds$.updatedAt);
   },
   position: 6
@@ -2017,7 +2024,7 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     pageProperties = _useState6[0],
     setPageProperties = _useState6[1];
-  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES),
+  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES$1),
     _useState8 = _slicedToArray(_useState7, 2),
     sortProperties = _useState8[0],
     setSortProperties = _useState8[1];
@@ -4226,7 +4233,7 @@ var useFetchStripePayouts = function useFetchStripePayouts(payload) {
 };
 var useShowStripePayout = function useShowStripePayout(id) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery(QUERY_KEYS.STRIPE_PAYOUT, function () {
+  return reactQuery.useQuery([QUERY_KEYS.STRIPE_PAYOUT, id], function () {
     return payoutsApi$1.show(id);
   }, options);
 };
@@ -4333,7 +4340,7 @@ var useFetchStripePlatformPayouts = function useFetchStripePlatformPayouts(paylo
 };
 var useShowStripePlatformPayout = function useShowStripePlatformPayout(id) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery(QUERY_KEYS.STRIPE_PAYOUT, function () {
+  return reactQuery.useQuery([QUERY_KEYS.STRIPE_PAYOUT, id], function () {
     return payoutsApi.show(id);
   }, options);
 };
@@ -4656,7 +4663,7 @@ var List$2 = function List(_ref) {
   };
   React.useEffect(function () {
     handleTablePaginaton(constants.DEFAULT_PAGE_INDEX, constants.DEFAULT_PAGE_SIZE);
-    setSortProperties(DEFAULT_SORT_PROPERTIES);
+    setSortProperties(DEFAULT_SORT_PROPERTIES$1);
   }, [filters, tab]);
   React.useEffect(function () {
     var _pageProperties$tab, _pageProperties$tab2;
@@ -4672,7 +4679,7 @@ var List$2 = function List(_ref) {
     setSortProperties(neetocist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
       sortBy: neetocist.camelToSnakeCase(sorter.field),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
-    } : DEFAULT_SORT_PROPERTIES);
+    } : DEFAULT_SORT_PROPERTIES$1);
   };
   if (isStripeAccountLoading || isStripePlatformAccountLoading || isDataLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
@@ -4681,7 +4688,9 @@ var List$2 = function List(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
-      title: isRefundKind$1(kind) ? t("neetoPayments.emptyState.refund") : t("neetoPayments.emptyState.payment")
+      title: tab === TAB$2.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
+        status: tab
+      })
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
@@ -4801,8 +4810,11 @@ var Dashboard = function Dashboard(_ref) {
     leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
-    }, t("neetoPayments.countOf.".concat(kind), {
+    }, tab === TAB$2.all ? t("neetoPayments.countOf.".concat(kind), {
       count: dataSize
+    }) : t("neetoPayments.countOf.".concat(kind, "WithStatus"), {
+      count: dataSize,
+      status: tab
     })),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
       columns: filterableColumns,
@@ -4863,10 +4875,10 @@ var Dashboard$1 = reactUtils.withTitle(withReactQuery(Dashboard), i18next.t("nee
 var TAB$1 = {
   all: "all",
   paid: "paid",
-  pending: "pending",
-  in_transit: "in_transit",
+  inTransit: "inTransit",
   failed: "failed",
-  canceled: "canceled"
+  canceled: "canceled",
+  pending: "pending"
 };
 var TABS$1 = Object.values(TAB$1);
 var SEARCH_PROPS = {
@@ -4888,6 +4900,10 @@ var FILTER_COLUMNS = [{
   type: "date",
   showRuleSelector: true
 }];
+var DEFAULT_SORT_PROPERTIES = {
+  sortBy: "created_at",
+  orderBy: "DESC"
+};
 
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -5023,6 +5039,9 @@ var IDENTIFIER_COLUMN = {
   width: "300px"
 };
 
+var processTab = function processTab(status) {
+  return neetoCist.camelToSnakeCase(status).split("_").join(" ");
+};
 var renderPayoutIdentifier$1 = ramda.curry(function (route, _ref) {
   var _ref$identifier = _ref.identifier,
     identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
@@ -5056,7 +5075,7 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(payoutsPageRout
     _useState6 = _slicedToArray(_useState5, 2),
     pageProperties = _useState6[0],
     setPageProperties = _useState6[1];
-  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES),
+  var _useState7 = React.useState(DEFAULT_SORT_PROPERTIES$1),
     _useState8 = _slicedToArray(_useState7, 2),
     sortProperties = _useState8[0],
     setSortProperties = _useState8[1];
@@ -5128,6 +5147,7 @@ var useFetchData$1 = function useFetchData(_ref) {
     payload = _ref.payload;
   var data = {};
   var kind = isPlatformEnabled ? "platform" : "connected";
+  var tab = neetoCist.snakeToCamelCase((payload === null || payload === void 0 ? void 0 : payload.tab) || "");
   data.connected = useFetchStripePayouts(payload, {
     enabled: !isPlatformEnabled
   });
@@ -5136,7 +5156,7 @@ var useFetchData$1 = function useFetchData(_ref) {
   });
   return {
     data: (_data$kind = data[kind]) === null || _data$kind === void 0 || (_data$kind = _data$kind.data) === null || _data$kind === void 0 ? void 0 : _data$kind.payouts,
-    dataSize: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.views) === null || _data$kind2 === void 0 ? void 0 : _data$kind2[payload === null || payload === void 0 ? void 0 : payload.tab],
+    dataSize: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.views) === null || _data$kind2 === void 0 ? void 0 : _data$kind2[tab],
     isDataLoading: (_data$kind3 = data[kind]) === null || _data$kind3 === void 0 ? void 0 : _data$kind3.isLoading,
     isDataFetching: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isFetching
   };
@@ -5177,6 +5197,7 @@ var List$1 = function List(_ref) {
     setDataSize(dataSize);
   }, [payouts]);
   var handleTablePagination = function handleTablePagination(page, pageSize) {
+    urlSearchParams.set("tab", tab);
     urlSearchParams.set("page", page);
     urlSearchParams.set("page_size", pageSize);
     history.push({
@@ -5214,7 +5235,7 @@ var List$1 = function List(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
-      title: t("neetoPayments.emptyState.payouts")
+      title: t("neetoPayments.emptyState.payouts.".concat(tab))
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
@@ -5301,8 +5322,11 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
     leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
-    }, t("neetoPayments.countOf.payout", {
+    }, tab === TAB$1.all ? t("neetoPayments.countOf.payout", {
       count: dataSize
+    }) : t("neetoPayments.countOf.payoutWithStatus", {
+      count: dataSize,
+      status: processTab(tab)
     })),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
       columns: FILTER_COLUMNS,
@@ -5395,7 +5419,7 @@ var PayoutsPage = function PayoutsPage(_ref) {
       id: id,
       isPlatformEnabled: isPlatformEnabled
     }),
-    isLoading = _useFetchData.isLoading,
+    isDataLoading = _useFetchData.isDataLoading,
     _useFetchData$data = _useFetchData.data,
     _useFetchData$data2 = _useFetchData$data === void 0 ? {} : _useFetchData$data,
     amount = _useFetchData$data2.amount,
@@ -5413,7 +5437,7 @@ var PayoutsPage = function PayoutsPage(_ref) {
   }, {
     text: identifier
   }];
-  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
+  if (isDataLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
     breadcrumbs: headerBreadCrumbs,
     title: t("neetoPayments.payoutsPage.title")