@bigbinary/neeto-payments-frontend 6.1.11 → 6.1.13

package/dist/cjs/SplitTransfersDashboard.js

@@ -0,0 +1,1063 @@
+'use strict';
+
+var react = require('react');
+var constants$1 = require('neetocommons/constants');
+var utils = require('neetocommons/utils');
+var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var reactRouterDom = require('react-router-dom');
+var ExportModal = require('./ExportModal-DE-VcN1X.js');
+var reactQuery = require('@tanstack/react-query');
+var reactUtils = require('neetocommons/react-utils');
+var axios = require('axios');
+var constants = require('./index-D6V3Vofs.js');
+var queryConstants = require('./queryConstants-Dc6wh21D.js');
+var formik = require('@bigbinary/neetoui/formik');
+var reactI18next = require('react-i18next');
+var i18next = require('i18next');
+var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
+var neetocist = require('neetocist');
+var Columns = require('@bigbinary/neeto-molecules/Columns');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var exportChannel = require('./exportChannel-BL2RGGhP.js');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
+var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var CopyButtonWrapper = require('./CopyButtonWrapper-I-kdKiiB.js');
+var Header = require('@bigbinary/neeto-molecules/Header');
+var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+require('@bigbinary/neeto-icons');
+require('decimal.js');
+require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
+const list = payload => axios.get(`${constants.BASE_URL}/api/v1/split_transfers`, {
+  params: payload
+});
+const show = id => axios.get(`${constants.BASE_URL}/api/v1/split_transfers/${id}`);
+const bulkUpdate = payload => axios.post(`${constants.BASE_URL}/api/v1/split_transfers/bulk_update`, {
+  splitTransfer: payload
+});
+const splitTransfersApi = {
+  list,
+  show,
+  bulkUpdate
+};
+
+const useFetchSplitTransfers = (payload = {}, options = {}) => reactQuery.useQuery({
+  queryKey: [queryConstants.QUERY_KEYS.SPLIT_TRANSFERS_LIST, payload],
+  queryFn: () => splitTransfersApi.list(payload),
+  ...options
+});
+const useShowSplitTransfers = (id, options) => reactQuery.useQuery({
+  queryKey: [queryConstants.QUERY_KEYS.SPLIT_TRANSFERS_DETAILS, id],
+  queryFn: () => splitTransfersApi.show(id),
+  ...options
+});
+const useBulkUpdateSplitTransfers = options => reactUtils.useMutationWithInvalidation(splitTransfersApi.bulkUpdate, {
+  keysToInvalidate: [queryConstants.QUERY_KEYS.SPLIT_TRANSFERS_LISTw],
+  ...options
+});
+
+const SPLIT_TRANSFERS_DASHBOARD_TAB = {
+  all: "all",
+  successful: "successful",
+  cancelled: "cancelled",
+  pending: "pending"
+};
+const SEARCH_PROPS = {
+  node: "identifier,",
+  key: "search_term",
+  model: "NeetoPaymentsEngine::Payments::Split,"
+};
+const FILTER_COLUMNS = [{
+  key: "amount",
+  label: i18next.t("neetoPayments.common.amount"),
+  node: "amount",
+  type: "decimal"
+}, {
+  key: "payment_at",
+  label: i18next.t("neetoPayments.common.transferTime"),
+  node: "payment_at",
+  type: "date"
+}];
+const INITIAL_TRANSFER_DETAILS = {
+  id: null,
+  isPaneOpen: false
+};
+const VALIDATION_SCHEMA = yup__namespace.object().shape({
+  reason: yup__namespace.string().required(i18next.t("neetoPayments.cancelSplitTransfers.reasonRequired"))
+});
+
+const CancelModal = ({
+  isOpen,
+  onClose,
+  handleSplitTransfersUpdate
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const handleSubmit = ({
+    reason
+  }) => {
+    handleSplitTransfersUpdate("cancelled", reason);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoui.Modal, {
+    isOpen,
+    onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "h2",
+        weight: "medium",
+        children: t("neetoPayments.cancelSplitTransfers.modal.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
+      formikProps: {
+        initialValues: {
+          reason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Body, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col space-y-4",
+            children: /*#__PURE__*/jsxRuntime.jsx(formik.Textarea, {
+              required: true,
+              label: t("neetoPayments.cancelSplitTransfers.modal.reason"),
+              name: "reason"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+            position: "right",
+            cancelButtonProps: {
+              onClick: onClose,
+              style: "tertiary"
+            },
+            submitButtonProps: {
+              disabled: false,
+              label: t("neetoPayments.common.submit")
+            }
+          })
+        })]
+      })
+    })]
+  });
+};
+
+const Status = ({
+  type,
+  status = ""
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const processedStatus = constants.preProcessStatus(type, status);
+  if (neetocist.isNotPresent(status)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+      style: "body2",
+      children: t("neetoPayments.common.notAvailable")
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoui.Tooltip, {
+    content: t(`neetoPayments.tooltipContent.${type}.${processedStatus}`),
+    position: "top",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-fit",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Tag, {
+        style: constants.getTagStyle(processedStatus),
+        label: neetocist.humanize(t(`neetoPayments.tagLabels.${type}.${processedStatus}`))
+      })
+    })
+  });
+};
+
+const Date = ({
+  date,
+  isTimeVisible = false
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  if (neetocist.isNotPresent(date)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+      style: "body2",
+      children: t("neetoPayments.common.notAvailable")
+    });
+  }
+  if (isTimeVisible) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateTime, {
+        date
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex items-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(DateFormat.Date, {
+      date
+    })
+  });
+};
+
+const DiscountCode = ({
+  discountCode,
+  currency
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    code,
+    value,
+    kind
+  } = discountCode;
+  return /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+    style: "body2",
+    children: kind === "percentage" ? t("neetoPayments.splitTransferDetails.discountCodeOfPercentageApplied", {
+      code,
+      percentage: value.toFixed(1)
+    }) : t("neetoPayments.splitTransferDetails.discountCodeOfAmountApplied", {
+      code,
+      amount: utils.currencyFormat.withSymbol(value, currency.toUpperCase(), {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2
+      })
+    })
+  });
+};
+
+const Details = ({
+  selectedTransfer,
+  setSelectedTransfer
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    isPending,
+    data: {
+      splitTransfer
+    } = {}
+  } = useShowSplitTransfers(selectedTransfer["id"], {
+    enabled: neetocist.isPresent(selectedTransfer["id"])
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoui.Pane, {
+    isOpen: selectedTransfer["isPaneOpen"],
+    size: "large",
+    onClose: () => setSelectedTransfer(ramda.mergeLeft({
+      isPaneOpen: false
+    }, selectedTransfer)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "h2",
+        children: t("neetoPayments.splitTransferDetails.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Pane.Body, {
+      children: isPending ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Spinner, {})
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-4 p-3",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex grid-cols-2 flex-col gap-3 lg:grid",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.identifier")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+            href: splitTransfer.transferUrl,
+            label: splitTransfer.identifier,
+            size: "small",
+            style: "link",
+            target: "_blank"
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.status")
+          }), /*#__PURE__*/jsxRuntime.jsx(Status, {
+            status: splitTransfer.status,
+            type: "splitTransfers"
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.transferTime")
+          }), /*#__PURE__*/jsxRuntime.jsx(Date, {
+            isTimeVisible: true,
+            date: splitTransfer.paymentAt
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.paymentAmount")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: utils.currencyFormat.withCode(splitTransfer.sourcePayment?.amount, splitTransfer.currency?.toUpperCase())
+          }), neetocist.isPresent(splitTransfer.discountCode) && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.discountCode")
+            }), /*#__PURE__*/jsxRuntime.jsx(DiscountCode, {
+              currency: splitTransfer.currency,
+              discountCode: splitTransfer.discountCode
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.netAmount")
+            }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+              popoverProps: {
+                position: "right"
+              },
+              description: t("neetoPayments.splitTransferDetails.netAmountDescription"),
+              title: t("neetoPayments.splitTransferDetails.netAmountHelpTitle")
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: utils.currencyFormat.withCode(splitTransfer.sourcePayment?.netAmount, splitTransfer.currency?.toUpperCase())
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex space-x-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.platformShare")
+            }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+              popoverProps: {
+                position: "right"
+              },
+              description: t("neetoPayments.splitTransferDetails.platformShareDescription"),
+              title: t("neetoPayments.splitTransferDetails.platformShareHelpTitle")
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: utils.currencyFormat.withCode(splitTransfer.platformShare, splitTransfer.currency?.toUpperCase())
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.transferredAmount")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: utils.currencyFormat.withCode(splitTransfer.amount, splitTransfer.currency?.toUpperCase())
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+          style: "h3",
+          children: t("neetoPayments.splitTransferDetails.destinationDetails")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex grid-cols-2 flex-col gap-3 lg:grid",
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountIdentifier")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+            href: splitTransfer.destinationAccount.dashboardUrl,
+            label: splitTransfer.destinationAccount.identifier,
+            size: "small",
+            style: "link",
+            target: "_blank"
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountName")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: splitTransfer.destinationAccount.userName
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountEmail")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body2",
+            children: splitTransfer.destinationAccount.userEmail
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.payoutStatus")
+          }), /*#__PURE__*/jsxRuntime.jsx(Status, {
+            status: splitTransfer.destinationPayout?.status,
+            type: "payout"
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.splitTransferDetails.payoutInitiatedDate")
+          }), /*#__PURE__*/jsxRuntime.jsx(Date, {
+            date: splitTransfer.destinationPayout?.createdAt
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.splitTransferDetails.payoutArrivalDate")
+          }), /*#__PURE__*/jsxRuntime.jsx(Date, {
+            date: splitTransfer.destinationPayout?.arrivalDate
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {})]
+        })]
+      })
+    })]
+  });
+};
+
+const renderIdentifier = ramda.curry((setSelectedTransfer, identifier, {
+  id
+}) => {
+  if (neetocist.isNotPresent(identifier)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoui.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.identifierUnavailable"),
+      position: "top",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+          style: "body2",
+          children: i18next.t("neetoPayments.common.notAvailable")
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+      label: identifier,
+      size: "small",
+      style: "link",
+      onClick: () => setSelectedTransfer({
+        id,
+        isPaneOpen: true
+      })
+    })
+  });
+});
+const renderPlatformPaymentIdentifier = ({
+  identifier,
+  receiptUrl,
+  kind
+}) => {
+  if (kind === constants.PAYMENT_KIND.temporary) {
+    return /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+      content: identifier,
+      children: identifier
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+      href: receiptUrl,
+      label: identifier,
+      size: "small",
+      style: "link",
+      target: "_blank"
+    })
+  });
+};
+const renderDestinationAccountIdentifier = ({
+  identifier,
+  dashboardUrl
+}) => /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+  content: identifier,
+  children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+    href: dashboardUrl,
+    label: identifier,
+    size: "small",
+    style: "link",
+    target: "_blank"
+  })
+});
+const renderStatus = ramda.curry((type, status) => /*#__PURE__*/jsxRuntime.jsx(Status, {
+  status,
+  type
+}));
+const renderDate = date => {
+  if (neetocist.isNotPresent(date)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoui.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.dateUnavailable"),
+      position: "top",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+          style: "body2",
+          children: i18next.t("neetoPayments.common.notAvailable")
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateTime, {
+    date
+  });
+};
+const renderPlatformShare = amount => {
+  if (neetocist.isNotPresent(amount)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoui.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.platformShareUnavailable"),
+      position: "top",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "body2",
+        children: i18next.t("neetoPayments.common.notCalculated")
+      })
+    });
+  }
+  return constants.formatAmount(amount);
+};
+const getDefaultColumns = setSelectedTransfer => [{
+  title: i18next.t("neetoPayments.common.id"),
+  dataIndex: "rowId",
+  key: "rowId",
+  width: 85,
+  position: 0,
+  isHidable: false
+}, {
+  title: i18next.t("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "identifier",
+  width: 300,
+  render: renderIdentifier(setSelectedTransfer),
+  position: 1,
+  isHidable: false
+}, {
+  title: i18next.t("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "status",
+  width: 150,
+  render: renderStatus("splitTransfers"),
+  sorter: true,
+  position: 2,
+  isHidable: false
+}, {
+  title: i18next.t("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  key: "amount",
+  width: 150,
+  sorter: true,
+  render: constants.formatAmount,
+  position: 3
+}, {
+  title: i18next.t("neetoPayments.common.currency"),
+  dataIndex: "currency",
+  key: "currency",
+  width: 160,
+  sorter: true,
+  render: constants.formatCurrency,
+  position: 3
+}, {
+  title: i18next.t("neetoPayments.common.platformShare"),
+  dataIndex: "platformShare",
+  key: "platformShare",
+  width: 205,
+  render: renderPlatformShare,
+  sorter: true,
+  position: 3
+}, {
+  title: i18next.t("neetoPayments.common.transferTime"),
+  dataIndex: "paymentAt",
+  key: "paymentAt",
+  width: 190,
+  render: renderDate,
+  sorter: true,
+  position: 10
+}, {
+  title: i18next.t("neetoPayments.common.platformPayment"),
+  dataIndex: "sourcePayment",
+  key: "sourcePayment",
+  render: renderPlatformPaymentIdentifier,
+  width: 300,
+  position: 19
+}, {
+  title: i18next.t("neetoPayments.common.accountIdentifier"),
+  dataIndex: "destinationAccount",
+  key: "destinationAccount",
+  render: renderDestinationAccountIdentifier,
+  width: 320,
+  position: 20
+}];
+
+const buildSearchProps = (searchProps, searchTerm) => ramda.mergeDeepWith(ramda.concat, SEARCH_PROPS, ramda.mergeLeft({
+  value: searchTerm.trim()
+}, searchProps));
+const buildFilterColumns = (payableEntityColumns = []) => ramda.reject(ramda.isNil, ramda.concat(FILTER_COLUMNS, ramda.map(ramda.prop("filterProps"), payableEntityColumns)));
+const buildTableColumns = ({
+  tab,
+  payableEntityColumns = [],
+  setSelectedTransfer
+}) => {
+  const filteredColumns = ramda.sortBy(ramda.prop("position"), ramda.concat(getDefaultColumns(setSelectedTransfer), payableEntityColumns));
+  if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all) return filteredColumns;
+  return neetocist.removeBy({
+    key: "status"
+  }, filteredColumns);
+};
+const buildRowData = ({
+  splitTransfers,
+  pageProperties = {}
+}) => splitTransfers?.map((element, index) => ({
+  ...element,
+  rowId: ramda.isEmpty(pageProperties) ? index + 1 : pageProperties.pageSize * (pageProperties.page - 1) + index + 1
+}));
+
+const List = ({
+  isFetching,
+  splitTransfers,
+  selectedRows,
+  views,
+  payableEntityColumns,
+  pageProperties,
+  onRowSelect,
+  setSortProperties,
+  handleTablePagination,
+  setHasBulkSelectedAllRows
+}) => {
+  const [selectedTransfer, setSelectedTransfer] = react.useState(INITIAL_TRANSFER_DETAILS);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const splitTransfersCount = views[tab];
+  const getRowSelection = () => {
+    if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.successful) return false;
+    if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all) {
+      return {
+        getCheckboxProps: record => ({
+          disabled: record.status === SPLIT_TRANSFERS_DASHBOARD_TAB.successful
+        })
+      };
+    }
+    return true;
+  };
+  const allColumns = buildTableColumns({
+    tab,
+    payableEntityColumns,
+    setSelectedTransfer
+  });
+  const {
+    isTableConfigurationLoading,
+    customizedColumns,
+    hideColumn
+  } = Columns.useTableConfigurations(`${exportChannel.TABLE_KEYS.SPLIT_TRANSFERS_TABLE}-${tab}`, allColumns);
+  const handleTableChange = (_, __, sorter) => {
+    setSortProperties(neetocist.isPresent(sorter?.column) ? {
+      sortBy: neetocist.camelToSnakeCase(constants.processDataIndex(sorter.field)),
+      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
+    } : constants.DEFAULT_SORT_PROPERTIES);
+  };
+  if (neetocist.isNotPresent(splitTransfers)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.NoData, {
+        title: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.emptyState.splitTransfers") : t("neetoPayments.emptyState.splitTransfersWithStatus", {
+          status: tab
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+      hasPagination: splitTransfersCount > pageProperties?.pageSize,
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Table, {
+        onRowSelect,
+        fixedHeight: true,
+        allowRowClick: false,
+        columnData: customizedColumns,
+        currentPageNumber: pageProperties?.page,
+        handlePageChange: handleTablePagination,
+        loading: isFetching || isTableConfigurationLoading,
+        rowData: buildRowData({
+          splitTransfers,
+          pageProperties,
+          tab
+        }),
+        rowSelection: getRowSelection(),
+        selectedRowKeys: selectedRows,
+        sortDirections: constants.SORT_DIRECTIONS,
+        totalCount: splitTransfersCount,
+        bulkSelectAllRowsProps: {
+          selectAllRowMessage: t("neetoPayments.splitTransferDetails.selectedSplitTransfers", {
+            count: selectedRows.length
+          }),
+          selectAllRowButtonLabel: t("neetoPayments.splitTransferDetails.selectAll", {
+            count: views[SPLIT_TRANSFERS_DASHBOARD_TAB.pending]
+          }),
+          setBulkSelectedAllRows: setHasBulkSelectedAllRows
+        },
+        paginationProps: {
+          showSizeChanger: true,
+          hideOnSinglePage: true,
+          pageSize: pageProperties?.pageSize,
+          total: splitTransfersCount
+        },
+        onChange: handleTableChange,
+        onColumnHide: ({
+          key
+        }) => hideColumn(key)
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Details, {
+      selectedTransfer,
+      setSelectedTransfer
+    })]
+  });
+};
+
+const ResumeModal = ({
+  isOpen,
+  onClose,
+  handleSplitTransfersUpdate
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const handleSubmit = ({
+    reason
+  }) => {
+    handleSplitTransfersUpdate("pending", reason);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoui.Modal, {
+    isOpen,
+    onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "h2",
+        weight: "medium",
+        children: t("neetoPayments.resumeSplitTransfers.modal.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
+      formikProps: {
+        initialValues: {
+          reason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Body, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col space-y-4",
+            children: /*#__PURE__*/jsxRuntime.jsx(formik.Textarea, {
+              required: true,
+              label: t("neetoPayments.resumeSplitTransfers.modal.reason"),
+              name: "reason"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+            position: "right",
+            cancelButtonProps: {
+              onClick: onClose,
+              style: "tertiary"
+            },
+            submitButtonProps: {
+              disabled: false,
+              label: t("neetoPayments.common.submit")
+            }
+          })
+        })]
+      })
+    })]
+  });
+};
+
+const {
+  Menu,
+  MenuItem
+} = neetoui.Dropdown;
+const TopSection = ({
+  views,
+  filters,
+  setIsCancelModalOpen,
+  setIsResumeModalOpen,
+  selectedRows,
+  selectedRowData,
+  setFilters,
+  hasBulkSelectedAllRows,
+  filterableColumns,
+  searchKeywordProps,
+  payableEntityColumns,
+  setIsExportModalOpen
+}) => {
+  const [isFilterPaneOpen, setIsFilterPaneOpen] = react.useState(false);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const history = reactRouterDom.useHistory();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const splitTransfersCount = views?.[tab];
+  const splitTransfersCountVisible = splitTransfersCount > 0 || splitTransfersCount === 0 && neetocist.isPresent(filters);
+  const isFilterButtonVisible = splitTransfersCount || neetocist.isPresent(filters);
+  const isDropdownVisible = neetocist.isNotEmpty(selectedRows);
+  const isCancelButtonDisabled = neetocist.existsBy({
+    status: SPLIT_TRANSFERS_DASHBOARD_TAB.cancelled
+  }, selectedRowData);
+  const isResumeButtonDisabled = neetocist.existsBy({
+    status: SPLIT_TRANSFERS_DASHBOARD_TAB.pending
+  }, selectedRowData);
+  const selectedRecordsCount = hasBulkSelectedAllRows ? splitTransfersCount : selectedRows.length;
+  const handleFiltersChange = filters => {
+    react.startTransition(() => {
+      setFilters(filters);
+    });
+  };
+  const handleTabChange = tab => {
+    const queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    const newParams = {
+      tab,
+      page: constants$1.DEFAULT_PAGE_INDEX,
+      page_size: constants$1.DEFAULT_PAGE_SIZE
+    };
+    history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft(newParams, queryParams)));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      title: t("neetoPayments.title.splitTransfers"),
+      searchProps: isFilterButtonVisible && {
+        placeholder: searchKeywordProps.placeholder,
+        className: "w-96"
+      }
+    }), constants.shouldTabsVisible(views) && /*#__PURE__*/jsxRuntime.jsx(neetoui.Tab, {
+      children: Object.keys(SPLIT_TRANSFERS_DASHBOARD_TAB).map(item => /*#__PURE__*/jsxRuntime.jsx(neetoui.Tab.Item, {
+        active: tab === item,
+        onClick: () => handleTabChange(item),
+        children: t(`neetoPayments.common.${item}`)
+      }, item))
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
+      className: "my-4",
+      leftActionBlock: splitTransfersCountVisible && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "w-100 flex items-center space-x-3",
+        children: isDropdownVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+            className: "neeto-ui-gray-800 me-2 font-semibold",
+            component: "h4",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              count: selectedRecordsCount,
+              i18nKey: "neetoPayments.splitTransferDetails.recordWithCount",
+              components: {
+                span: /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "neeto-ui-text-gray-600"
+                })
+              },
+              values: {
+                count: selectedRecordsCount,
+                recordsCount: splitTransfersCount
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(neetoui.Dropdown, {
+            buttonStyle: "secondary",
+            label: t("neetoPayments.common.takeAction"),
+            children: [/*#__PURE__*/jsxRuntime.jsx(Menu, {
+              children: /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                isDisabled: isCancelButtonDisabled,
+                tooltipProps: isCancelButtonDisabled ? {
+                  content: t("neetoPayments.tooltipContent.splitTransfers.cancelledRecordsSelected")
+                } : "",
+                onClick: () => setIsCancelModalOpen(true),
+                children: t("neetoPayments.common.cancel")
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(Menu, {
+              children: /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                isDisabled: isResumeButtonDisabled,
+                tooltipProps: isResumeButtonDisabled ? {
+                  content: t("neetoPayments.tooltipContent.splitTransfers.pendingRecordsSelected")
+                } : "",
+                onClick: () => setIsResumeModalOpen(true),
+                children: t("neetoPayments.common.resume")
+              })
+            })]
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+          className: "neeto-ui-gray-800 me-2 font-semibold",
+          component: "h4",
+          children: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.countOf.splitTransfer", {
+            count: splitTransfersCount
+          }) : t("neetoPayments.countOf.splitTransferWithStatus", {
+            count: splitTransfersCount,
+            status: tab
+          })
+        })
+      }),
+      rightActionBlock: isFilterButtonVisible && /*#__PURE__*/jsxRuntime.jsx(SubHeader.RightBlock, {
+        columnsButtonProps: {
+          columnData: buildTableColumns({
+            tab,
+            payableEntityColumns,
+            setSelectedTransfer: () => {}
+          }).map(ramda.modify("dataIndex", constants.processDataIndex)),
+          fixedColumns: constants.UN_HIDEABLE_COLUMNS,
+          tableKey: `${exportChannel.TABLE_KEYS.SPLIT_TRANSFERS_TABLE}-${tab}`
+        },
+        downloadButtonProps: {
+          onClick: () => setIsExportModalOpen(true)
+        },
+        filterProps: {
+          columns: filterableColumns,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoFiltersFrontend.Bar, {
+      columns: filterableColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    })]
+  });
+};
+
+const SplitTransfersDashboard = ({
+  searchProps,
+  payableEntityColumns
+}) => {
+  const {
+    searchTerm = ""
+  } = utils.getQueryParams();
+  const filterableColumns = buildFilterColumns(payableEntityColumns);
+  const searchKeywordProps = buildSearchProps(searchProps, searchTerm);
+  const [selectedRows, setSelectedRows] = react.useState([]);
+  const [selectedRowData, setSelectedRowData] = react.useState([]);
+  const [isExportModalOpen, setIsExportModalOpen] = react.useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = react.useState(false);
+  const [isResumeModalOpen, setIsResumeModalOpen] = react.useState(false);
+  const [hasBulkSelectedAllRows, setHasBulkSelectedAllRows] = react.useState(false);
+  const [sortProperties, setSortProperties] = react.useState(constants.DEFAULT_SORT_PROPERTIES);
+  const [pageProperties, setPageProperties] = react.useState(constants.DEFAULT_PAGE_VALUES);
+  const [filters, setFilters] = react.useState(neetoFiltersFrontend.buildFiltersFromURL([...filterableColumns, searchKeywordProps]));
+  const history = reactRouterDom.useHistory();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const payload = {
+    tab,
+    filters,
+    ...pageProperties,
+    ...sortProperties
+  };
+  const {
+    data: {
+      splitTransfers,
+      views
+    } = {},
+    isFetching,
+    isPending: isSplitTransfersLoading
+  } = useFetchSplitTransfers(payload);
+  const {
+    mutate: updateSplitTransfers,
+    isPending: isCancelling
+  } = useBulkUpdateSplitTransfers({
+    onSuccess: () => {
+      setSelectedRowData([]);
+      setSelectedRows([]);
+    }
+  });
+  const handleSplitTransfersUpdate = (status, reason) => {
+    const ids = ramda.pluck("id", selectedRowData);
+    updateSplitTransfers({
+      ids,
+      status,
+      reason,
+      isApplyChangesToAllRequired: hasBulkSelectedAllRows
+    });
+    setIsCancelModalOpen(false);
+    setIsResumeModalOpen(false);
+  };
+  const handleTablePagination = (page, pageSize) => {
+    const queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft({
+      page,
+      page_size: pageSize
+    }, queryParams)));
+    setPageProperties({
+      page,
+      pageSize
+    });
+  };
+  const handleRowSelect = (keys, rowData) => {
+    setSelectedRows(keys);
+    setSelectedRowData(rowData);
+  };
+  react.useEffect(() => {
+    handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
+    setSortProperties(constants.DEFAULT_SORT_PROPERTIES);
+    setSelectedRowData([]);
+    setSelectedRows([]);
+  }, [filters, tab]);
+  if (isSplitTransfersLoading || isCancelling) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TopSection, {
+      filterableColumns,
+      filters,
+      hasBulkSelectedAllRows,
+      pageProperties,
+      payableEntityColumns,
+      searchKeywordProps,
+      selectedRowData,
+      selectedRows,
+      setFilters,
+      setIsCancelModalOpen,
+      setIsExportModalOpen,
+      setIsResumeModalOpen,
+      setPageProperties,
+      setSortProperties,
+      views
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      handleTablePagination,
+      isFetching,
+      pageProperties,
+      payableEntityColumns,
+      selectedRows,
+      setHasBulkSelectedAllRows,
+      setSelectedRows,
+      setSortProperties,
+      splitTransfers,
+      views,
+      onRowSelect: handleRowSelect
+    }), /*#__PURE__*/jsxRuntime.jsx(ExportModal.ExportModal, {
+      filters,
+      isExportModalOpen,
+      setIsExportModalOpen,
+      sortProperties,
+      dashboardKind: constants.DASHBOARD_KIND.splitTransfers
+    }), /*#__PURE__*/jsxRuntime.jsx(CancelModal, {
+      handleSplitTransfersUpdate,
+      isOpen: isCancelModalOpen,
+      onClose: () => setIsCancelModalOpen(false)
+    }), /*#__PURE__*/jsxRuntime.jsx(ResumeModal, {
+      handleSplitTransfersUpdate,
+      isOpen: isResumeModalOpen,
+      onClose: () => setIsResumeModalOpen(false)
+    })]
+  });
+};
+
+module.exports = SplitTransfersDashboard;
+//# sourceMappingURL=SplitTransfersDashboard.js.map