@bigbinary/neeto-payments-frontend 1.4.17 → 1.4.19

package/dist/Dashboard.js

@@ -0,0 +1,597 @@
+import { _ as _extends } from './extends-093996c9.js';
+import React__default, { useState, useEffect, useTransition } from 'react';
+import { t } from 'i18next';
+import { isPresent, camelToSnakeCase, isNotPresent } from '@bigbinary/neeto-cist';
+import { useQueryParams, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
+import Header from '@bigbinary/neeto-molecules/Header';
+import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
+import Tab from '@bigbinary/neetoui/Tab';
+import Typography from '@bigbinary/neetoui/Typography';
+import { useTranslation } from 'react-i18next';
+import { d as buildDefaultPageProperties, r as renderStatus, f as buildRowData, c as renderDate, e as buildPayload, w as withReactQuery } from './renderFunctions-5f829290.js';
+import { T as TAB, a as TABS, b as TAB_METADATA, I as INITIAL_PANE_STATUS, D as DASHBOARD_MANDATORY_COLUMNS, K as KIND } from './index-1aedc364.js';
+import { b as buildFilterColumns, m as modifySearchProps, a as buildPaymentColumns, r as renderSplitIdentifier, c as renderRefundIdentifier, i as isSplitKind, d as isTransferKind, e as isConnectedKind, f as isRefundKind, g as isPlatformKind, p as processResponse, h as renderIdentifier, E as ExportModal } from './ExportModal-a00544db.js';
+import { getQueryParams, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { modify, mergeLeft, isEmpty, assoc } from 'ramda';
+import { useHistory } from 'react-router-dom';
+import { DEFAULT_SORT_PROPERTIES, SORT_DIRECTIONS } from './constants.js';
+import { p as processDataIndex } from './index-48f8b281.js';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
+import { useHiddenColumns } from '@bigbinary/neeto-molecules/Columns';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Table from '@bigbinary/neetoui/Table';
+import NoData from '@bigbinary/neetoui/NoData';
+import { u as useFetchStripeTransactions, a as useFetchConnectedStripeAccount } from './useConnectApi-185a67ad.js';
+import { u as useFetchStripeRefunds, a as useFetchStripePlatformTransactions, b as useFetchStripePlatformSplits, c as useFetchStripePlatformTransaction, d as useFetchStripePlatformAccount } from './usePlatformApi-5dba6b28.js';
+import { Down, Right } from '@bigbinary/neeto-icons';
+import Pane from '@bigbinary/neetoui/Pane';
+import 'react-query';
+import 'react-query/devtools';
+import '@bigbinary/neetoui/Toastr';
+import '@bigbinary/neeto-molecules/DateFormat';
+import '@bigbinary/neetoui/Button';
+import '@bigbinary/neetoui/Tag';
+import '@bigbinary/neetoui/Tooltip';
+import '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import '@bigbinary/neetoui/Modal';
+import 'axios';
+import './exportChannel-e0822151.js';
+import './IdentifierButton-73cadb18.js';
+import 'util';
+import './queryConstants-9b7fe0cf.js';
+
+const useFiltersAndPagination = _ref => {
+  let {
+    payableEntityColumns,
+    kind,
+    searchProps
+  } = _ref;
+  const {
+    tab = TAB.all
+  } = useQueryParams();
+  const history = useHistory();
+  const tabs = TABS.filter(tab => !TAB_METADATA[tab]?.isHidden?.[kind]);
+  const [isFilterButtonVisible, setIsFilterButtonVisible] = useState(false);
+  const [isFilterPaneOpen, setIsFilterPaneOpen] = useState(false);
+  const [pageProperties, setPageProperties] = useState(buildDefaultPageProperties(tabs));
+  const [sortProperties, setSortProperties] = useState(DEFAULT_SORT_PROPERTIES);
+  const filterableColumns = buildFilterColumns(tab, kind, payableEntityColumns);
+  const {
+    searchTerm = ""
+  } = getQueryParams();
+  const searchKeywordProps = {
+    ...modifySearchProps({
+      searchProps,
+      kind
+    }),
+    key: "search_term",
+    value: searchTerm.trim()
+  };
+  const [filters, setFilters] = useState(buildFiltersFromURL([...filterableColumns, searchKeywordProps]));
+  const [dataSize, setDataSize] = useState(null);
+  const [paneStatus, setPaneStatus] = useState(INITIAL_PANE_STATUS);
+  const columns = buildPaymentColumns({
+    tab,
+    kind,
+    payableEntityColumns,
+    specialColumnArguments: {
+      setPaneStatus
+    }
+  });
+  const modifiedColumns = columns.map(modify("dataIndex", processDataIndex));
+  const handleTabChange = tab => {
+    setDataSize(null);
+    const queryParams = getQueryParams({
+      toCamelCase: false
+    });
+    const newParams = {
+      tab,
+      page: pageProperties[tab]?.page,
+      page_size: pageProperties[tab]?.pageSize
+    };
+    history.push(buildUrl(window.location.pathname, mergeLeft(newParams, queryParams)));
+  };
+  return {
+    isFilterButtonVisible,
+    isFilterPaneOpen,
+    pageProperties,
+    paneStatus,
+    filters,
+    searchKeywordProps,
+    tabs,
+    tab,
+    dataSize,
+    filterableColumns,
+    sortProperties,
+    columns,
+    modifiedColumns,
+    setIsFilterButtonVisible,
+    setIsFilterPaneOpen,
+    setPageProperties,
+    setPaneStatus,
+    setFilters,
+    handleTabChange,
+    setDataSize,
+    setSortProperties
+  };
+};
+
+const SPLIT_COLUMNS = [{
+  key: "splitSubId",
+  title: t("neetoPayments.common.id"),
+  dataIndex: "id",
+  width: "72px"
+}, {
+  key: "splitSubIdentifier",
+  title: t("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  width: "300px",
+  render: renderSplitIdentifier
+}, {
+  key: "splitSubAmount",
+  title: t("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  width: "150px"
+}, {
+  key: "splitSubStatus",
+  title: t("neetoPayments.common.status"),
+  dataIndex: "status",
+  width: "130px",
+  render: renderStatus("split")
+}];
+const REFUND_COLUMNS = [{
+  key: "refundId",
+  title: t("neetoPayments.common.id"),
+  dataIndex: "id",
+  width: "72px"
+}, {
+  key: "refundIdentifier",
+  title: t("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  width: "290px",
+  render: renderRefundIdentifier
+}, {
+  key: "refundAmount",
+  title: t("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  width: "150px"
+}, {
+  key: "refundStatus",
+  title: t("neetoPayments.common.status"),
+  dataIndex: "status",
+  width: "200px",
+  render: renderStatus("refund")
+}];
+
+const SubTable = _ref => {
+  let {
+    data = [],
+    className = "",
+    kind = "split"
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className || "ml-12 max-w-3xl"
+  }, /*#__PURE__*/React__default.createElement(TableWrapper, {
+    hasPagination: false
+  }, /*#__PURE__*/React__default.createElement(Table, {
+    fixedHeight: true,
+    columnData: isSplitKind(kind) ? SPLIT_COLUMNS : REFUND_COLUMNS,
+    pagination: false,
+    rowData: buildRowData({
+      data
+    }),
+    scroll: {
+      y: 300
+    }
+  })));
+};
+
+const ExpandedRow = function () {
+  let {
+    splits = [],
+    refunds = []
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "my-2 space-y-2"
+  }, !isEmpty(splits) && /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "ml-12",
+    style: "h3"
+  }, t("neetoPayments.common.splits")), /*#__PURE__*/React__default.createElement(SubTable, {
+    data: splits
+  })), !isEmpty(refunds) && /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "ml-12",
+    style: "h3"
+  }, t("neetoPayments.title.refund")), /*#__PURE__*/React__default.createElement(SubTable, {
+    data: refunds,
+    kind: "refund"
+  })));
+};
+
+const useFetchData = _ref => {
+  let {
+    kind,
+    holdableId,
+    payload,
+    isPlatformEnabled
+  } = _ref;
+  const data = {};
+  data.transfer = data.connected = useFetchStripeTransactions(holdableId, {
+    ...payload,
+    kind
+  }, {
+    enabled: isTransferKind(kind) || isConnectedKind(kind)
+  });
+  data.refund = useFetchStripeRefunds(payload, {
+    enabled: isRefundKind(kind)
+  });
+  data.platform = useFetchStripePlatformTransactions(payload, {
+    enabled: isPlatformKind(kind) && isPlatformEnabled
+  });
+  data.split = useFetchStripePlatformSplits(payload, {
+    enabled: isSplitKind(kind)
+  });
+  return {
+    data: processResponse(data[kind]?.data, kind),
+    dataSize: data[kind]?.data?.counts?.[payload?.tab],
+    isDataLoading: data[kind]?.isLoading,
+    isDataFetching: data[kind]?.isFetching
+  };
+};
+
+const RowExpander = _ref => {
+  let {
+    expanded,
+    onExpand,
+    record,
+    expandable
+  } = _ref;
+  return expandable && (expanded ? /*#__PURE__*/React__default.createElement(Down, {
+    className: "cursor-pointer",
+    onClick: e => onExpand(record, e)
+  }) : /*#__PURE__*/React__default.createElement(Right, {
+    className: "cursor-pointer",
+    onClick: e => onExpand(record, e)
+  }));
+};
+
+const Details = _ref => {
+  let {
+    transactionId,
+    ...paneProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    isLoading,
+    data: {
+      amount,
+      netAmount,
+      status,
+      paymentAt,
+      identifier,
+      live,
+      splits = []
+    } = {}
+  } = useFetchStripePlatformTransaction(transactionId);
+  return /*#__PURE__*/React__default.createElement(Pane, _extends({}, paneProps, {
+    size: "large"
+  }), /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h2"
+  }, "Transaction Details")), /*#__PURE__*/React__default.createElement(Pane.Body, null, isLoading ? /*#__PURE__*/React__default.createElement(PageLoader, null) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full space-y-6 p-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full space-y-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.transactionPane.transactionId")), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, renderIdentifier({
+    identifier,
+    live
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.transactionPane.amount")), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, amount)), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.transactionPane.netAmount")), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, netAmount)), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.transactionPane.status")), renderStatus("transaction", status)), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.transactionPane.paidOn")), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, renderDate(paymentAt)))), /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h3"
+  }, "Splits"), /*#__PURE__*/React__default.createElement(SubTable, {
+    className: "ml-0 w-full",
+    data: splits
+  }))));
+};
+
+const List = _ref => {
+  let {
+    isPlatformEnabled = false,
+    kind,
+    holdableId = null,
+    filters,
+    setIsFilterButtonVisible,
+    pageProperties,
+    setPageProperties,
+    tab,
+    paneStatus,
+    setPaneStatus,
+    setDataSize,
+    sortProperties,
+    setSortProperties,
+    payoutId,
+    columns
+  } = _ref;
+  const history = useHistory();
+  const {
+    t
+  } = useTranslation();
+  const {
+    hideColumn,
+    hiddenColumns = []
+  } = useHiddenColumns(`stripePaymentDashboard_${kind}`);
+  const {
+    isLoading: isStripePlatformAccountLoading,
+    data: {
+      platformAccount: stripePlatformAccount
+    } = {}
+  } = useFetchStripePlatformAccount({
+    enabled: isPlatformEnabled
+  });
+  const {
+    isLoading: isStripeAccountLoading,
+    data: {
+      account: stripeConnectedAccount
+    } = {}
+  } = useFetchConnectedStripeAccount(holdableId);
+  const {
+    data,
+    isDataLoading,
+    dataSize,
+    isDataFetching
+  } = useFetchData({
+    kind,
+    holdableId,
+    payload: buildPayload({
+      tab,
+      filters,
+      pageProperties,
+      sortProperties,
+      payoutId
+    }),
+    isPlatformEnabled
+  });
+  const isStripeAccountConnected = stripeConnectedAccount?.isConnected || stripePlatformAccount?.isConnected;
+  useEffect(() => {
+    setIsFilterButtonVisible(isPresent(data) || isPresent(filters));
+    setDataSize(dataSize);
+  }, [data]);
+  const handleTablePaginaton = (page, pageSize) => {
+    const queryParams = getQueryParams({
+      toCamelCase: false
+    });
+    history.push(buildUrl(window.location.pathname, mergeLeft({
+      page,
+      page_size: pageSize
+    }, queryParams)));
+    setPageProperties(assoc(tab, {
+      page,
+      pageSize
+    }));
+  };
+  useEffect(() => {
+    handleTablePaginaton(DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE);
+    setSortProperties(DEFAULT_SORT_PROPERTIES);
+  }, [filters, tab]);
+  const handleTableChange = (_, __, sorter) => {
+    setSortProperties(isPresent(sorter?.column) ? {
+      sortBy: camelToSnakeCase(processDataIndex(sorter.field)),
+      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
+    } : DEFAULT_SORT_PROPERTIES);
+  };
+  if (isStripeAccountLoading || isStripePlatformAccountLoading || isDataLoading) {
+    return /*#__PURE__*/React__default.createElement(PageLoader, null);
+  }
+  if (!isStripeAccountConnected && 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.all ? t(`neetoPayments.emptyState.${kind}`) : t(`neetoPayments.emptyState.${kind}WithStatus`, {
+        status: tab
+      })
+    }));
+  }
+  const visibleColumns = columns.filter(_ref2 => {
+    let {
+      dataIndex
+    } = _ref2;
+    return !hiddenColumns.includes(processDataIndex(dataIndex));
+  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableWrapper, {
+    hasPagination: dataSize > pageProperties[tab]?.pageSize
+  }, /*#__PURE__*/React__default.createElement(Table, {
+    fixedHeight: true,
+    allowRowClick: false,
+    columnData: visibleColumns,
+    currentPageNumber: pageProperties[tab]?.page,
+    handlePageChange: handleTablePaginaton,
+    loading: isDataFetching,
+    rowData: buildRowData({
+      data,
+      pageProperties,
+      tab
+    }),
+    rowSelection: false,
+    sortDirections: SORT_DIRECTIONS,
+    totalCount: dataSize,
+    expandable: {
+      expandedRowRender: ExpandedRow,
+      showExpandColumn: isPlatformKind(kind),
+      rowExpandable: record => !(isEmpty(record.splits) && isEmpty(record.refunds)),
+      columnWidth: "64px",
+      expandIcon: RowExpander
+    },
+    paginationProps: {
+      showSizeChanger: true,
+      hideOnSinglePage: true,
+      pageSize: pageProperties[tab]?.pageSize,
+      total: dataSize
+    },
+    onChange: handleTableChange,
+    onColumnHide: column => {
+      hideColumn(processDataIndex(column.dataIndex));
+    }
+  })), /*#__PURE__*/React__default.createElement(Details, _extends({}, paneStatus, {
+    onClose: () => setPaneStatus(INITIAL_PANE_STATUS)
+  })));
+};
+
+const Dashboard = _ref => {
+  let {
+    isPlatformEnabled = false,
+    searchProps,
+    headerProps = {},
+    holdableId = null,
+    payableEntityColumns = [],
+    kind = "connected",
+    payoutId = null
+  } = _ref;
+  const [_, startTransition] = useTransition();
+  const {
+    t
+  } = useTranslation();
+  const [showExportModal, setShowExportModal] = useState(false);
+  const {
+    searchKeywordProps,
+    pageProperties,
+    filterableColumns,
+    isFilterButtonVisible,
+    isFilterPaneOpen,
+    filters,
+    tabs,
+    tab,
+    dataSize,
+    sortProperties,
+    columns,
+    modifiedColumns,
+    paneStatus,
+    setPaneStatus,
+    setIsFilterButtonVisible,
+    setIsFilterPaneOpen,
+    setFilters,
+    setPageProperties,
+    handleTabChange,
+    setDataSize,
+    setSortProperties
+  } = useFiltersAndPagination({
+    payableEntityColumns,
+    kind,
+    searchProps
+  });
+  const isTabsVisible = (isFilterButtonVisible || tab !== "all") && isNotPresent(payoutId);
+  const titleKind = kind === "transfer" && !isPlatformEnabled ? KIND.connected : kind;
+  const handleFiltersChange = filters => {
+    startTransition(() => {
+      setFilters(filters);
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Header, _extends({}, headerProps, {
+    title: t(`neetoPayments.title.${titleKind}`),
+    searchProps: isFilterButtonVisible && {
+      placeholder: searchKeywordProps.placeholder,
+      className: "w-80"
+    }
+  })), isTabsVisible && /*#__PURE__*/React__default.createElement(Tab, null, tabs.map(item => /*#__PURE__*/React__default.createElement(Tab.Item, {
+    active: tab === item,
+    key: item,
+    onClick: () => handleTabChange(item)
+  }, t(`neetoPayments.common.${item}`)))), /*#__PURE__*/React__default.createElement(SubHeader, {
+    className: "mt-4",
+    leftActionBlock: isPresent(dataSize) && /*#__PURE__*/React__default.createElement(Typography, {
+      className: "neeto-ui-gray-800 mr-2 font-semibold",
+      component: "h4"
+    }, tab === TAB.all ? t(`neetoPayments.countOf.${kind}`, {
+      count: dataSize
+    }) : t(`neetoPayments.countOf.${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: modifiedColumns,
+        fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
+        localStorageKey: `stripePaymentDashboard_${kind}`
+      },
+      downloadButtonProps: {
+        onClick: () => setShowExportModal(true)
+      },
+      filterProps: {
+        columns: filterableColumns,
+        isOpen: isFilterPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFilterPaneOpen,
+        onChange: handleFiltersChange
+      }
+    }))
+  }), /*#__PURE__*/React__default.createElement(List, {
+    columns,
+    filters,
+    holdableId,
+    isPlatformEnabled,
+    kind,
+    pageProperties,
+    paneStatus,
+    payoutId,
+    setDataSize,
+    setIsFilterButtonVisible,
+    setPageProperties,
+    setPaneStatus,
+    setSortProperties,
+    sortProperties,
+    tab
+  }), /*#__PURE__*/React__default.createElement(ExportModal, {
+    filters,
+    holdableId,
+    kind,
+    setShowExportModal,
+    showExportModal,
+    sortProperties,
+    tab
+  }));
+};
+var Dashboard$1 = withTitle(withReactQuery(Dashboard), t("neetoPayments.common.payments"));
+
+export { Dashboard$1 as default };
+//# sourceMappingURL=Dashboard.js.map