@bigbinary/neeto-team-members-frontend 4.4.27 → 4.5.1

package/dist/cjs/TeamMembers.js

@@ -21,10 +21,10 @@ var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
 var withReactQuery = require('../withReactQuery-C7a_pGxf.js');
 var index$1 = require('../index-CWyeI4Kz.js');
-var useTeamsApi = require('../useTeamsApi-DMq-AW7A.js');
+var useTeamsApi = require('../useTeamsApi-DqizqY5S.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var utils = require('@bigbinary/neeto-filters-frontend/utils');
-var ManageMember = require('../index-yFl2aYDN.js');
+var ManageMember = require('../index-DPMt5r_V.js');
 var injectCss = require('../inject-css-vQvjPR2x.js');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Button = require('@bigbinary/neetoui/Button');
@@ -36,6 +36,10 @@ var Typography = require('@bigbinary/neetoui/Typography');
 var Right$1 = require('@bigbinary/neeto-icons/Right');
 var Search = require('@bigbinary/neeto-icons/Search');
 var Input = require('@bigbinary/neetoui/Input');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Radio = require('@bigbinary/neetoui/Radio');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var constants$1 = require('./constants.js');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 require('@tanstack/react-query');
 require('../queryClient-4vAFE3bx.js');
@@ -47,7 +51,6 @@ require('qs');
 require('classnames');
 require('@bigbinary/neeto-icons/Info');
 require('@bigbinary/neeto-icons/LeftArrow');
-require('@bigbinary/neetoui/Toastr');
 require('@bigbinary/neetoui/Callout');
 require('@bigbinary/neetoui/formik/ActionBlock');
 require('@bigbinary/neetoui/formik/Form');
@@ -58,15 +61,14 @@ require('../RolesRadioGroup-CGjcYVyV.js');
 require('@bigbinary/neetoui/Label');
 require('@bigbinary/neetoui/formik/Radio');
 require('yup');
-require('@bigbinary/neetoui/Pane');
 require('@bigbinary/neetoui/Modal');
 require('@bigbinary/neetoui/formik/MultiEmailInput');
 require('@bigbinary/neetoui/formik/Input');
 require('@bigbinary/neeto-molecules/MoreDropdown');
 require('@bigbinary/neetoui/Avatar');
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFilters = function useFilters(_ref) {
   var _config$filterColumns;
   var config = _ref.config;
@@ -85,7 +87,7 @@ var useFilters = function useFilters(_ref) {
     emailSearchTerm = _useState2[0],
     setEmailSearchTerm = _useState2[1];
   var defaultNeetoFilters = utils.buildFiltersFromURL([].concat(_toConsumableArray((_config$filterColumns = config === null || config === void 0 ? void 0 : config.filterColumns) !== null && _config$filterColumns !== void 0 ? _config$filterColumns : ManageMember.defaultNeetoFiltersColumns()), [searchKeywordProps]));
-  var _useState3 = require$$0.useState(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, ManageMember.DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
+  var _useState3 = require$$0.useState(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, ManageMember.DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
       neetoFilters: defaultNeetoFilters
     })),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -134,8 +136,8 @@ var useFilters = function useFilters(_ref) {
   };
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useTeams = function useTeams(_ref) {
   var config = _ref.config,
     filters = _ref.filters,
@@ -211,7 +213,7 @@ var useTeams = function useTeams(_ref) {
       emails: ramda.pluck("email", rowData),
       keys: keys
     };
-    setSelectedRows(_objectSpread$4({}, rows));
+    setSelectedRows(_objectSpread$5({}, rows));
     config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$onRowSe = _config$table.onRowSelect) === null || _config$table$onRowSe === void 0 || _config$table$onRowSe.call(_config$table, {
       rows: rows,
       resetSelectedRows: resetSelectedRows,
@@ -241,8 +243,8 @@ injectCss.n(css,{});
 var FIXED_COLUMNS = ["name", "actions"];
 var MANAGE_ROLES_BUTTON_LABEL = i18next.t("neetoTeamMembers.labels.manageRole", constants.PLURAL);
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Header$2 = function Header(_ref) {
   var isCreatePermissionGranted = _ref.isCreatePermissionGranted,
     otherActionBlock = _ref.otherActionBlock,
@@ -254,7 +256,7 @@ var Header$2 = function Header(_ref) {
   var isRolesButtonVisible = !!rolesButtonProps;
   var isOtherActionBlockVisible = !!otherActionBlock;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [isOtherActionBlockVisible && otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$3({
+    children: [isOtherActionBlockVisible && otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$4({
       "data-cy": "ntm-manage-roles-button",
       label: MANAGE_ROLES_BUTTON_LABEL,
       style: "secondary"
@@ -395,8 +397,8 @@ var RolesDropdown = function RolesDropdown(_ref) {
   });
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var Left = function Left(_ref) {
@@ -542,7 +544,7 @@ var Left = function Left(_ref) {
       title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
       message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
         i18nKey: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.message,
-        values: _objectSpread$2(_objectSpread$2({}, selectedMembersCountValues), {}, {
+        values: _objectSpread$3(_objectSpread$3({}, selectedMembersCountValues), {}, {
           person: selectedRows.displayNames[0],
           role: bulkUpdateRole
         })
@@ -559,9 +561,10 @@ var Right = reactUtils.withT(function (_ref3) {
     columns = _ref3.columns,
     filterColumns = _ref3.filterColumns,
     handleNeetoFilterChange = _ref3.handleNeetoFilterChange,
-    setIsFiltersPaneOpen = _ref3.setIsFiltersPaneOpen,
     isFiltersPaneOpen = _ref3.isFiltersPaneOpen,
-    searchKeywordProps = _ref3.searchKeywordProps;
+    searchKeywordProps = _ref3.searchKeywordProps,
+    setIsDownloadPaneOpen = _ref3.setIsDownloadPaneOpen,
+    setIsFiltersPaneOpen = _ref3.setIsFiltersPaneOpen;
   return /*#__PURE__*/jsxRuntime.jsx(SubHeader$1.RightBlock, {
     columnsButtonProps: {
       columnData: columns,
@@ -572,6 +575,12 @@ var Right = reactUtils.withT(function (_ref3) {
         placeholder: t("neetoTeamMembers.columns.search")
       }
     },
+    downloadButtonProps: {
+      isVisible: true,
+      onClick: function onClick() {
+        return setIsDownloadPaneOpen(true);
+      }
+    },
     filterProps: {
       columns: filterColumns,
       isOpen: isFiltersPaneOpen,
@@ -586,6 +595,134 @@ var SubHeader = {
   Right: Right
 };
 
+var EXPORT_TYPES = {
+  PDF: "pdf",
+  CSV: "csv",
+  EXCEL: "xlsx"
+};
+var DEFAULT_EXPORT_OPTIONS = {
+  exportType: EXPORT_TYPES.EXCEL
+};
+var EXPORT_OPTIONS = [{
+  type: EXPORT_TYPES.EXCEL,
+  individualExportLabel: i18next.t("neetoTeamMembers.labels.downloads.xlsx"),
+  bulkExportLabel: i18next.t("neetoTeamMembers.labels.downloadAs", {
+    format: i18next.t("neetoTeamMembers.labels.downloads.xlsx")
+  }),
+  dataCy: "download-as-excel-radio-item"
+}, {
+  type: EXPORT_TYPES.CSV,
+  individualExportLabel: i18next.t("neetoTeamMembers.labels.downloads.csv"),
+  bulkExportLabel: i18next.t("neetoTeamMembers.labels.downloadAs", {
+    format: i18next.t("neetoTeamMembers.labels.downloads.csv")
+  }),
+  dataCy: "download-as-csv-radio-item"
+}, {
+  type: EXPORT_TYPES.PDF,
+  individualExportLabel: i18next.t("neetoTeamMembers.labels.downloads.pdf"),
+  bulkExportLabel: i18next.t("neetoTeamMembers.labels.downloadAs", {
+    format: i18next.t("neetoTeamMembers.labels.downloads.pdf")
+  }),
+  dataCy: "download-as-pdf-radio-item"
+}];
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ExportPane = function ExportPane(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    appliedFilters = _ref.appliedFilters,
+    hasBulkSelectedAllRows = _ref.hasBulkSelectedAllRows,
+    selectedMemberIds = _ref.selectedMemberIds,
+    selectedRowsCount = _ref.selectedRowsCount;
+  var _useState = require$$0.useState(DEFAULT_EXPORT_OPTIONS),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportOptions = _useState2[0],
+    setExportOptions = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var setExportOption = function setExportOption(exportOptions) {
+    return setExportOptions(ramda.mergeLeft(exportOptions));
+  };
+  var exportType = exportOptions.exportType;
+  var getParams = function getParams() {
+    return _objectSpread$2(_objectSpread$2({}, exportOptions), {}, {
+      filters: appliedFilters || undefined,
+      considerAllMembers: hasBulkSelectedAllRows,
+      memberIds: hasBulkSelectedAllRows ? undefined : selectedMemberIds
+    });
+  };
+  var _useExportMembers = useTeamsApi.useExportMembers({
+      onSuccess: function onSuccess() {
+        onClose();
+        setExportOptions(DEFAULT_EXPORT_OPTIONS);
+        Toastr.success(/*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "toastr.success.downloadMembers",
+          values: {
+            email: initializers.globalProps.user.email
+          }
+        }));
+        utils$1.captureAnalyticsEvent(constants$1.EVENTS.TEAM_MEMBERS_DOWNLOADED, _objectSpread$2({}, exportOptions));
+      },
+      onError: function onError(error) {
+        return Toastr.error(error);
+      }
+    }),
+    exportMembers = _useExportMembers.mutate;
+  var description = neetoCist.isNotEmpty(selectedMemberIds) || hasBulkSelectedAllRows ? t("neetoTeamMembers.downloadPane.description.selectedMembers", {
+    count: selectedRowsCount
+  }) : t("neetoTeamMembers.downloadPane.description.allMembers");
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        "data-cy": "export-member-heading",
+        style: "h2",
+        children: t("neetoTeamMembers.downloadPane.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Radio, {
+        stacked: true,
+        className: "flex-grow-0 space-y-4",
+        label: description,
+        children: EXPORT_OPTIONS.map(function (_ref2) {
+          var type = _ref2.type,
+            bulkExportLabel = _ref2.bulkExportLabel,
+            dataCy = _ref2.dataCy;
+          return /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+            checked: exportType === type,
+            "data-cy": dataCy,
+            label: bulkExportLabel,
+            onChange: function onChange() {
+              return setExportOption({
+                exportType: type
+              });
+            }
+          }, type);
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
+      className: "gap-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+        "data-cy": "export-submit-button",
+        label: t("neetoTeamMembers.buttons.download"),
+        onClick: function onClick() {
+          return exportMembers({
+            "export": getParams()
+          });
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        className: "mr-2",
+        "data-cy": "export-cancel-button",
+        label: t("neetoTeamMembers.buttons.cancel"),
+        style: "text",
+        onClick: onClose
+      })]
+    })]
+  });
+};
+
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Header = function Header(_ref) {
@@ -627,8 +764,12 @@ var TeamMembers = function TeamMembers(_ref) {
     setIsFiltersPaneOpen = _useState2[1];
   var _useState3 = require$$0.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasBulkSelectedAllRows = _useState4[0],
-    setHasBulkSelectedAllRows = _useState4[1];
+    isDownloadPaneOpen = _useState4[0],
+    setIsDownloadPaneOpen = _useState4[1];
+  var _useState5 = require$$0.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasBulkSelectedAllRows = _useState6[0],
+    setHasBulkSelectedAllRows = _useState6[1];
   require$$0.useEffect(function () {
     handleMemberFilterChange();
   }, []);
@@ -763,6 +904,7 @@ var TeamMembers = function TeamMembers(_ref) {
           handleNeetoFilterChange: handleNeetoFilterChange,
           isFiltersPaneOpen: isFiltersPaneOpen,
           searchKeywordProps: searchKeywordProps,
+          setIsDownloadPaneOpen: setIsDownloadPaneOpen,
           setIsFiltersPaneOpen: setIsFiltersPaneOpen
         })
       }), /*#__PURE__*/jsxRuntime.jsx(FiltersBar, {
@@ -771,6 +913,15 @@ var TeamMembers = function TeamMembers(_ref) {
         keyword: searchKeywordProps,
         setIsPaneOpen: setIsFiltersPaneOpen,
         onChange: handleNeetoFilterChange
+      }), /*#__PURE__*/jsxRuntime.jsx(ExportPane, {
+        hasBulkSelectedAllRows: hasBulkSelectedAllRows,
+        selectedRowsCount: selectedRowsCount,
+        appliedFilters: filters,
+        isOpen: isDownloadPaneOpen,
+        selectedMemberIds: selectedRows.keys,
+        onClose: function onClose() {
+          return setIsDownloadPaneOpen(false);
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
         hasPagination: (team === null || team === void 0 ? void 0 : team.membersCount) > filters.pageSize,
         children: (team === null || team === void 0 ? void 0 : team.membersCount) !== 0 ? /*#__PURE__*/jsxRuntime.jsx(Table, {