@bigbinary/neeto-payments-frontend 1.3.8 → 1.3.9

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

@@ -85,6 +85,10 @@
       "refundWithStatus": "There are no {{status}} refunds.",
       "account": "There are no standard accounts.",
       "accountWithStatus": "There are no {{status}} standard accounts.",
+      "squarePayment": "There are no payments.",
+      "squarePaymentWithStatus": "There are no {{status}} payments.",
+      "squareRefund": "There are no refunds.",
+      "squareRefundWithStatus": "There are no {{status}} refunds.",
       "payouts": {
         "all": "There are no payouts to show.",
         "paid": "There are no paid payouts.",
@@ -126,7 +130,8 @@
         "successful": "successful",
         "refunded": "refunded",
         "pending": "pending",
-        "initiated": "initiated"
+        "initiated": "initiated",
+        "requires_action": "requires action"
       },
       "payment": {
         "completed": "completed",
@@ -148,7 +153,8 @@
         "declined": "This payment failed because the issuing bank declined it",
         "initiated": "The customer has not entered their payment method.",
         "pending": "Transaction has been authorized, but the funds have not been captured yet",
-        "refunded": "Transaction has been refunded"
+        "refunded": "Transaction has been refunded",
+        "requires_action": "The process requires further action from the customer to complete"
       },
       "refund": {
         "successful": "The refund has been successfully processed",
@@ -223,8 +229,12 @@
       "refundWithStatus_other": "{{count}} {{status}} refunds",
       "squarePayment": "{{count}} payment",
       "squarePayment_other": "{{count}} payments",
+      "squarePaymentWithStatus": "{{count}} {{status}} payment",
+      "squarePaymentWithStatus_other": "{{count}} {{status}} payments",
       "squareRefund": "{{count}} refund",
       "squareRefund_other": "{{count}} refunds",
+      "squareRefundWithStatus": "{{count}} {{status}} refund",
+      "squareRefundWithStatus_other": "{{count}} {{status}} refunds",
       "account": "{{count}} standard account",
       "account_other": "{{count}} standard accounts",
       "accountWithStatus": "{{count}} {{status}} standard account",

package/dist/index.cjs.js

@@ -4852,7 +4852,7 @@ var Dashboard = function Dashboard(_ref) {
     handleTabChange = _useFiltersAndPaginat.handleTabChange,
     setDataSize = _useFiltersAndPaginat.setDataSize,
     setSortProperties = _useFiltersAndPaginat.setSortProperties;
-  var isTabsVisible = isFilterButtonVisible || tab !== "all";
+  var isTabsVisible = (isFilterButtonVisible || tab !== "all") && neetoCist.isNotPresent(payoutId);
   var titleKind = kind === "transfer" && !isPlatformEnabled ? KIND.connected : kind;
   var handleFiltersChange = function handleFiltersChange(filters) {
     startTransition(function () {
@@ -6119,8 +6119,11 @@ var FilterWrapper = function FilterWrapper(_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 === "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,
@@ -6180,6 +6183,7 @@ var COLUMNS = [{
   title: i18next.t("neetoPayments.common.status"),
   dataIndex: "status",
   key: "status",
+  sorter: true,
   render: renderStatus("payment")
 }, {
   title: i18next.t("neetoPayments.common.identifier"),
@@ -6191,6 +6195,7 @@ var COLUMNS = [{
   title: i18next.t("neetoPayments.common.status"),
   dataIndex: "status",
   key: "refundStatus",
+  sorter: true,
   render: renderStatus("refund")
 }, {
   title: i18next.t("neetoPayments.common.paymentIdentifier"),
@@ -6202,11 +6207,13 @@ var COLUMNS = [{
   title: i18next.t("neetoPayments.common.amount"),
   dataIndex: "amount",
   key: "amount",
+  sorter: true,
   width: "150px"
 }, {
   title: i18next.t("neetoPayments.common.paymentTime"),
   dataIndex: "updatedAt",
   key: "paymentTime",
+  sorter: true,
   width: "220px",
   render: renderDate
 }];
@@ -6277,31 +6284,35 @@ var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
     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 = React.useState(false),
+  var _useState = React.useState(DEFAULT_SORT_PROPERTIES$1),
     _useState2 = _slicedToArray(_useState, 2),
-    isFilterButtonVisible = _useState2[0],
-    setIsFilterButtonVisible = _useState2[1];
+    sortProperties = _useState2[0],
+    setSortProperties = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isFilterPaneOpen = _useState4[0],
-    setIsFilterPaneOpen = _useState4[1];
-  var _useState5 = React.useState(buildDefaultPageProperties(tabs)),
+    isFilterButtonVisible = _useState4[0],
+    setIsFilterButtonVisible = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    pageProperties = _useState6[0],
-    setPageProperties = _useState6[1];
-  var _useState7 = React.useState("all"),
+    isFilterPaneOpen = _useState6[0],
+    setIsFilterPaneOpen = _useState6[1];
+  var _useState7 = React.useState(buildDefaultPageProperties(tabs)),
     _useState8 = _slicedToArray(_useState7, 2),
-    tab = _useState8[0],
-    setTab = _useState8[1];
-  var filterableColumns = buildFilterColumns(payableEntityColumns);
-  var _useState9 = React.useState(neetoFiltersFrontend.buildFiltersFromURL(filterableColumns)),
+    pageProperties = _useState8[0],
+    setPageProperties = _useState8[1];
+  var _useState9 = React.useState("all"),
     _useState10 = _slicedToArray(_useState9, 2),
-    filters = _useState10[0],
-    setFilters = _useState10[1];
-  var _useState11 = React.useState(0),
+    tab = _useState10[0],
+    setTab = _useState10[1];
+  var filterableColumns = buildFilterColumns(payableEntityColumns);
+  var _useState11 = React.useState(neetoFiltersFrontend.buildFiltersFromURL(filterableColumns)),
     _useState12 = _slicedToArray(_useState11, 2),
-    dataSize = _useState12[0],
-    setDataSize = _useState12[1];
+    filters = _useState12[0],
+    setFilters = _useState12[1];
+  var _useState13 = React.useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dataSize = _useState14[0],
+    setDataSize = _useState14[1];
   var _getQueryParams = utils$3.getQueryParams(),
     _getQueryParams$searc = _getQueryParams.searchTerm,
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
@@ -6325,9 +6336,11 @@ var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
     tab: tab,
     filterableColumns: filterableColumns,
     dataSize: dataSize,
+    sortProperties: sortProperties,
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setIsFilterPaneOpen: setIsFilterPaneOpen,
     setPageProperties: setPageProperties,
+    setSortProperties: setSortProperties,
     setFilters: setFilters,
     setTab: setTab,
     handleTabChange: handleTabChange,
@@ -6431,7 +6444,7 @@ var useFetchSquareRefunds = function useFetchSquareRefunds() {
 };
 
 var useFetchSquareData = function useFetchSquareData(_ref) {
-  var _data$kind, _data$kind2, _data$kind3, _data$kind4;
+  var _data$kind, _data$kind2, _data$kind3, _data$kind4, _data$kind5;
   var kind = _ref.kind,
     holdableId = _ref.holdableId,
     payload = _ref.payload;
@@ -6445,7 +6458,8 @@ var useFetchSquareData = function useFetchSquareData(_ref) {
   return {
     data: isPaymentKind(kind) ? (_data$kind = data[kind]) === null || _data$kind === void 0 || (_data$kind = _data$kind.data) === null || _data$kind === void 0 ? void 0 : _data$kind.payments : (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 ? void 0 : _data$kind2.refunds,
     dataSize: (_data$kind3 = data[kind]) === null || _data$kind3 === void 0 || (_data$kind3 = _data$kind3.data) === null || _data$kind3 === void 0 || (_data$kind3 = _data$kind3.views) === null || _data$kind3 === void 0 ? void 0 : _data$kind3[payload === null || payload === void 0 ? void 0 : payload.tab],
-    isDataLoading: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isLoading
+    isDataLoading: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isLoading,
+    isDataFetching: (_data$kind5 = data[kind]) === null || _data$kind5 === void 0 ? void 0 : _data$kind5.isFetching
   };
 };
 
@@ -6462,6 +6476,8 @@ var List = function List(_ref) {
     tab = _ref.tab,
     tabs = _ref.tabs,
     handleTabChange = _ref.handleTabChange,
+    sortProperties = _ref.sortProperties,
+    setSortProperties = _ref.setSortProperties,
     setDataSize = _ref.setDataSize;
   var urlSearchParams = useURLSearchParams();
   var history = reactRouterDom.useHistory();
@@ -6483,11 +6499,13 @@ var List = function List(_ref) {
       payload: buildPayload({
         tab: tab,
         filters: filters,
-        pageProperties: pageProperties
+        pageProperties: pageProperties,
+        sortProperties: sortProperties
       })
     }),
     data = _useFetchSquareData.data,
     isDataLoading = _useFetchSquareData.isDataLoading,
+    isDataFetching = _useFetchSquareData.isDataFetching,
     dataSize = _useFetchSquareData.dataSize;
   React.useEffect(function () {
     setIsFilterButtonVisible(neetocist.isPresent(data) || neetocist.isPresent(filters));
@@ -6514,6 +6532,12 @@ var List = function List(_ref) {
     urlSearchParams.set("tab", validatedTab);
     handleTablePaginaton(pageIndex, pageSize);
   }, [urlSearchParams]);
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    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$1);
+  };
   if (isSquareAccountLoading || isDataLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   }
@@ -6521,7 +6545,9 @@ var List = 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(kind) ? t("neetoPayments.emptyState.refund") : t("neetoPayments.emptyState.payment")
+      title: tab === TAB.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
+        status: tab
+      })
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
@@ -6532,19 +6558,22 @@ var List = function List(_ref) {
     columnData: columnData,
     currentPageNumber: (_pageProperties$tab4 = pageProperties[tab]) === null || _pageProperties$tab4 === void 0 ? void 0 : _pageProperties$tab4.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$tab5 = pageProperties[tab]) === null || _pageProperties$tab5 === void 0 ? void 0 : _pageProperties$tab5.pageSize,
       total: dataSize
-    }
+    },
+    onChange: handleTableChange
   }));
 };
 
@@ -6560,6 +6589,8 @@ var SquareDashboard = function SquareDashboard(_ref) {
     payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
     _ref$kind = _ref.kind,
     kind = _ref$kind === void 0 ? "squarePayment" : _ref$kind;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var filterPaginationState = useFiltersAndPagination({
     payableEntityColumns: payableEntityColumns,
     kind: kind,
@@ -6570,12 +6601,14 @@ var SquareDashboard = function SquareDashboard(_ref) {
     setIsFilterButtonVisible = filterPaginationState.setIsFilterButtonVisible,
     pageProperties = filterPaginationState.pageProperties,
     setPageProperties = filterPaginationState.setPageProperties,
+    sortProperties = filterPaginationState.sortProperties,
+    setSortProperties = filterPaginationState.setSortProperties,
     tab = filterPaginationState.tab,
     tabs = filterPaginationState.tabs,
     handleTabChange = filterPaginationState.handleTabChange,
     setDataSize = filterPaginationState.setDataSize;
   return /*#__PURE__*/React__default["default"].createElement(FilterWrapper, _extends$1({
-    title: isPaymentKind(kind) ? i18next.t("neetoPayments.title.squarePayment") : i18next.t("neetoPayments.title.squareRefund")
+    title: isPaymentKind(kind) ? t("neetoPayments.title.squarePayment") : t("neetoPayments.title.squareRefund")
   }, _objectSpread$1({
     headerProps: headerProps,
     kind: kind,
@@ -6591,7 +6624,9 @@ var SquareDashboard = function SquareDashboard(_ref) {
     setIsFilterButtonVisible: setIsFilterButtonVisible,
     setPageProperties: setPageProperties,
     tab: tab,
-    tabs: tabs
+    tabs: tabs,
+    sortProperties: sortProperties,
+    setSortProperties: setSortProperties
   }));
 };
 var index$1 = reactUtils.withTitle(withReactQuery(SquareDashboard), i18next.t("neetoPayments.common.squarePayments"));