@bigbinary/neeto-team-members-frontend 3.0.0 → 3.0.2

package/README.md

@@ -71,6 +71,7 @@ You can learn more about the setup and usage here:
 1. [Permissions](./docs/engine/permissions.md)
 2. [Roles](./docs/engine/roles.md)
 3. [Concerns](./docs/engine/concerns.md)
+4. [Member Limit](./docs/engine/member_limits.md)
 
 ### Frontend package
 

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

@@ -60,7 +60,9 @@
       "role_one": "Role",
       "role_other": "Roles",
       "search_": "Search {{what}}",
-      "takeAction": "Take action"
+      "takeAction": "Take action",
+      "pro": "Pro",
+      "subscriptionPlan": "Subscription plan"
     },
     "helpers": {
       "addMembersToNeetoProducts": "Add {{- emails, boldList}} to the following neeto products.",
@@ -75,7 +77,8 @@
       "selectedMembersCount_other": "{{count}} {{taxonomies.member.plural}} selected of <span>{{totalCount}}</span>",
       "singleProductInvitation": "{{- emails, boldList}} will be invited to <strong>{{product, anyCase}}</strong> with a role of <strong>{{role, anyCase}}</strong>.",
       "themeSelector": "Theme selector",
-      "whyIsItDisabled": "Why is it disabled?"
+      "whyIsItDisabled": "Why is it disabled?",
+      "subscriptionWarning": "You will be charged <strong>{{amount}}</strong> for each newly added member on the next renewal."
     },
     "labels": {
       "addNewRole": "Add new role",
@@ -89,7 +92,8 @@
       "manageRole_other": "Manage roles",
       "neeto_": "neeto{{product, anyCase}}",
       "roleNotFound_one": "There are no role to show",
-      "roleNotFound_other": "There are no roles to show"
+      "roleNotFound_other": "There are no roles to show",
+      "upgradeToProPlan": "Upgrade the above added members to the PRO plan"
     },
     "placeholders": {
       "email": "Please enter the email addresses",

package/dist/index.cjs.js

@@ -613,6 +613,10 @@ var DATE_FORMAT_OPTIONS = [{
   label: i18next.t("neetoTeamMembers.profile.common.ddmmyy"),
   value: "%d/%m/%Y"
 }];
+var SUBSCRIPTION_PLANS = Object.freeze({
+  PRO: "pro",
+  FREE: "free"
+});
 
 var fetchCountries = function fetchCountries() {
   return axios__default["default"].get("".concat(BASE_URL, "/profile/countries"));
@@ -5843,6 +5847,9 @@ var fetch = function fetch(params) {
   });
   return axios__default["default"].get("".concat(BASE_URL, "/teams?").concat(serializedParams));
 };
+var fetchCountsPerCategory = function fetchCountsPerCategory() {
+  return axios__default["default"].get("".concat(BASE_URL, "/teams/counts_per_category"));
+};
 var create = function create(payload) {
   return axios__default["default"].post("".concat(BASE_URL, "/teams"), payload);
 };
@@ -5864,6 +5871,7 @@ var teamsApi = {
   create: create,
   fetch: fetch,
   fetchFilterOptions: fetchFilterOptions,
+  fetchCountsPerCategory: fetchCountsPerCategory,
   update: update
 };
 
@@ -5884,13 +5892,21 @@ var useFetchMembers = function useFetchMembers() {
     refetchOnWindowFocus: false
   }));
 };
+var useFetchMembersCountsPerCategory = function useFetchMembersCountsPerCategory() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$8(_objectSpread$8({
+    select: ramda.identity,
+    keepPreviousData: true
+  }, options), {}, {
+    refetchOnWindowFocus: false
+  }));
+};
 var useCreateMember = function useCreateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return reactQuery.useMutation(teamsApi.create, _objectSpread$8({
+  return reactUtils.useMutationWithInvalidation(teamsApi.create, _objectSpread$8({
+    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess(response) {
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       // @ts-ignore
       _onSuccess === null || _onSuccess === void 0 || _onSuccess(response);
     }
@@ -5899,14 +5915,13 @@ var useCreateMember = function useCreateMember(_ref) {
 var useUpdateMember = function useUpdateMember(_ref2) {
   var _onSuccess2 = _ref2.onSuccess,
     options = _objectWithoutProperties(_ref2, _excluded2$1);
-  return reactQuery.useMutation(function (_ref3) {
+  return reactUtils.useMutationWithInvalidation(function (_ref3) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
   }, _objectSpread$8({
+    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
     }
   }, options));
@@ -5914,10 +5929,9 @@ var useUpdateMember = function useUpdateMember(_ref2) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref4) {
   var _onSuccess3 = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$8({
+  return reactUtils.useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$8({
+    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       _onSuccess3 === null || _onSuccess3 === void 0 || _onSuccess3();
     }
   }, options));
@@ -5995,7 +6009,8 @@ var renderNameColumn = function renderNameColumn(_ref) {
     tableData = _ref.tableData;
   var active = tableData.active,
     name = tableData.displayName,
-    imageUrl = tableData.profileImageUrl;
+    imageUrl = tableData.profileImageUrl,
+    subscriptionPlan = tableData.subscriptionPlan;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-members-table__wrapper"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6007,12 +6022,19 @@ var renderNameColumn = function renderNameColumn(_ref) {
       imageUrl: imageUrl
     }
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "ntm-member-name-".concat(utils$3.hyphenize(name)),
     style: "body2"
   }, name), displayStatusTag && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
     "data-cy": "ntm-member-status-tag",
     style: active ? "primary" : "secondary",
     type: "outline",
     label: active ? i18next__default["default"].t(MEMBER_FILTER.ACTIVE.label) : i18next__default["default"].t(MEMBER_FILTER.DEACTIVATED.label)
+  }), subscriptionPlan === SUBSCRIPTION_PLANS.PRO && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    className: "neeto-ui-text-transform-uppercase",
+    "data-cy": "ntm-member-subscription-plan-tag",
+    label: i18next__default["default"].t("neetoTeamMembers.common.pro"),
+    style: "info",
+    type: "outline"
   })), renderDropdownButton({
     config: config,
     handleUpdateRole: handleUpdateRole,
@@ -6118,18 +6140,35 @@ var getDefaultColumns = function getDefaultColumns(_ref5) {
     sorter: true,
     width: 200,
     title: i18next__default["default"].t("neetoTeamMembers.common.role", constants.SINGULAR)
+  }, {
+    dataIndex: "subscriptionPlan",
+    key: "subscription_plan",
+    hidden: true,
+    isHidable: false,
+    title: ""
   }];
 };
 var removeExcludedRole = ramda.curry(function (excludedRoles, role) {
   return !(excludedRoles !== null && excludedRoles !== void 0 && excludedRoles.includes(role === null || role === void 0 ? void 0 : role.name));
 });
-var getColumnData = function getColumnData(_ref6) {
+var getSubscriptionLabelAndValue = function getSubscriptionLabelAndValue() {
+  return Object.entries(SUBSCRIPTION_PLANS).map(function (_ref6) {
+    var _ref7 = _slicedToArray(_ref6, 2),
+      key = _ref7[0],
+      value = _ref7[1];
+    return {
+      label: key,
+      value: value
+    };
+  });
+};
+var getColumnData = function getColumnData(_ref8) {
   var _config$otherColumns;
-  var config = _ref6.config,
-    handleUpdateRole = _ref6.handleUpdateRole,
-    handleUpdateStatus = _ref6.handleUpdateStatus,
-    memberFilter = _ref6.memberFilter,
-    isSize = _ref6.isSize;
+  var config = _ref8.config,
+    handleUpdateRole = _ref8.handleUpdateRole,
+    handleUpdateStatus = _ref8.handleUpdateStatus,
+    memberFilter = _ref8.memberFilter,
+    isSize = _ref8.isSize;
   var displayStatusTag = ramda.identical(memberFilter, MEMBER_FILTER.ALL.value);
   var otherColumns = (_config$otherColumns = config === null || config === void 0 ? void 0 : config.otherColumns) !== null && _config$otherColumns !== void 0 ? _config$otherColumns : [];
   var defaultColumns = getDefaultColumns({
@@ -6141,15 +6180,15 @@ var getColumnData = function getColumnData(_ref6) {
     isSize: isSize
   });
   var columns = defaultColumns.map(function (column) {
-    var otherColumn = otherColumns.find(function (_ref7) {
-      var dataIndex = _ref7.dataIndex;
+    var otherColumn = otherColumns.find(function (_ref9) {
+      var dataIndex = _ref9.dataIndex;
       return ramda.identical(dataIndex, column.dataIndex);
     });
     return otherColumn || column;
   });
   otherColumns.forEach(function (otherColumn) {
-    var column = columns.find(function (_ref8) {
-      var dataIndex = _ref8.dataIndex;
+    var column = columns.find(function (_ref10) {
+      var dataIndex = _ref10.dataIndex;
       return ramda.identical(dataIndex, otherColumn.dataIndex);
     });
     if (!column) columns.push(otherColumn);
@@ -6224,20 +6263,28 @@ var defaultNeetoFiltersColumns = function defaultNeetoFiltersColumns() {
     node: "organization_role.name",
     type: "multi_option",
     values: []
+  }, {
+    key: "subscription_plan",
+    label: i18next__default["default"].t("neetoTeamMembers.common.subscriptionPlan", constants.SINGULAR),
+    model: "User",
+    node: "subscription_plan",
+    type: "single_option",
+    values: []
   }];
 };
-var buildFilterColumns = function buildFilterColumns(_ref9) {
-  var _ref9$options = _ref9.options,
-    _ref9$options$emails = _ref9$options.emails,
-    emails = _ref9$options$emails === void 0 ? [] : _ref9$options$emails,
-    _ref9$options$organiz = _ref9$options.organizationRoles,
-    organizationRoles = _ref9$options$organiz === void 0 ? [] : _ref9$options$organiz,
-    _ref9$emailConfig = _ref9.emailConfig,
-    setSearchTerm = _ref9$emailConfig.setSearchTerm,
-    isLoading = _ref9$emailConfig.isLoading;
+var buildFilterColumns = function buildFilterColumns(_ref11) {
+  var _ref11$options = _ref11.options,
+    _ref11$options$emails = _ref11$options.emails,
+    emails = _ref11$options$emails === void 0 ? [] : _ref11$options$emails,
+    _ref11$options$organi = _ref11$options.organizationRoles,
+    organizationRoles = _ref11$options$organi === void 0 ? [] : _ref11$options$organi,
+    _ref11$emailConfig = _ref11.emailConfig,
+    setSearchTerm = _ref11$emailConfig.setSearchTerm,
+    isLoading = _ref11$emailConfig.isLoading;
   var columnValues = {
     email: emails.map(neetoCist.toLabelAndValue),
-    role: organizationRoles.map(neetoCist.toLabelAndValue)
+    role: organizationRoles.map(neetoCist.toLabelAndValue),
+    subscription_plan: getSubscriptionLabelAndValue()
   };
   return defaultNeetoFiltersColumns().map(function (column) {
     var values = columnValues[column.key];
@@ -6252,8 +6299,8 @@ var buildFilterColumns = function buildFilterColumns(_ref9) {
 };
 var getValidCategory = function getValidCategory(category) {
   var defaultCategory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MEMBER_FILTER.ACTIVE.value;
-  return Object.values(MEMBER_FILTER).some(function (_ref10) {
-    var value = _ref10.value;
+  return Object.values(MEMBER_FILTER).some(function (_ref12) {
+    var value = _ref12.value;
     return ramda.identical(value, category);
   }) ? category : defaultCategory;
 };
@@ -6262,9 +6309,9 @@ var getFilteredRoles = function getFilteredRoles() {
   var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return ramda.filter(removeExcludedRole(config === null || config === void 0 ? void 0 : config.excludedRoles), roles);
 };
-var generateNoDataContent = function generateNoDataContent(_ref11) {
-  var filterCategory = _ref11.filterCategory,
-    buttonProps = _ref11.buttonProps;
+var generateNoDataContent = function generateNoDataContent(_ref13) {
+  var filterCategory = _ref13.filterCategory,
+    buttonProps = _ref13.buttonProps;
   var disabled = buttonProps.disabled,
     onClick = buttonProps.onClick;
   var kind = MEMBER_FILTER[filterCategory].value.toLowerCase();
@@ -6667,6 +6714,9 @@ var Left = function Left(_ref) {
       window.location.pathname = "/";
     }
   };
+  var resetSelectedRows = function resetSelectedRows() {
+    return setSelectedRows(DEFAULT_SELECTED_ROWS);
+  };
   var handleActivateMembers = function handleActivateMembers() {
     return bulkUpdateMember({
       users: {
@@ -6762,7 +6812,7 @@ var Left = function Left(_ref) {
     setBulkUpdateRole: setBulkUpdateRole,
     disabled: hasDeactivateMembers,
     hasUpdatePermission: isUpdatePermissionGranted
-  }), config === null || config === void 0 || (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config))))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+  }), config === null || config === void 0 || (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config, resetSelectedRows, selectedRows))))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: selectedAlert,
     submitButtonLabel: getButtonLabel(selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.type),
     title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
@@ -6884,6 +6934,7 @@ var AppList = function AppList(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
     checked: isAppListEnabled,
     className: "ntm-manage-members__checkbox-align-start",
+    "data-cy": "ntm-manage-members-app-list-checkbox",
     label: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       component: "span",
       lineHeight: "relaxed",
@@ -7069,6 +7120,7 @@ var renderInitialValues = function renderInitialValues(_ref) {
     lastName: "",
     emails: [],
     role: (_roles$1$name = (_roles$ = roles[1]) === null || _roles$ === void 0 ? void 0 : _roles$.name) !== null && _roles$1$name !== void 0 ? _roles$1$name : "",
+    subscriptionPlan: SUBSCRIPTION_PLANS.FREE,
     appRoles: generateAppsRolesInitialValue(globalRoles, (_roles$2 = roles[1]) === null || _roles$2 === void 0 ? void 0 : _roles$2.name)
   }, additionalFieldsInitialValues);
 };
@@ -7329,10 +7381,45 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
   }));
 };
 
+var SubscriptionPlan = function SubscriptionPlan(_ref) {
+  var _subscription$plan, _subscription$plan2;
+  var subscription = _ref.subscription;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var isProPlan = (values === null || values === void 0 ? void 0 : values.subscriptionPlan) === SUBSCRIPTION_PLANS.PRO;
+  var handleChange = function handleChange(event) {
+    return setFieldValue("subscriptionPlan", event.target.checked ? SUBSCRIPTION_PLANS.PRO : SUBSCRIPTION_PLANS.FREE);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-col space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Checkbox, {
+    label: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoTeamMembers.labels.upgradeToProPlan"
+    }),
+    name: "isSubscriptionProPlan",
+    onChange: handleChange
+  }), isProPlan && /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
+    icon: neetoIcons.Warning,
+    style: "warning"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "body2",
+    weight: "normal"
+  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    i18nKey: "neetoTeamMembers.helpers.subscriptionWarning",
+    values: {
+      amount: utils$3.currencyFormat.withSymbol(subscription === null || subscription === void 0 || (_subscription$plan = subscription.plan) === null || _subscription$plan === void 0 ? void 0 : _subscription$plan.amount, subscription === null || subscription === void 0 || (_subscription$plan2 = subscription.plan) === null || _subscription$plan2 === void 0 || (_subscription$plan2 = _subscription$plan2.currency) === null || _subscription$plan2 === void 0 ? void 0 : _subscription$plan2.toUpperCase(), {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0
+      })
+    }
+  }))));
+};
+
 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 ManageMember = function ManageMember(_ref) {
-  var _manageMemberComponen, _config$additionalFie2;
+  var _config$subscription, _manageMemberComponen, _config$additionalFie2;
   var config = _ref.config,
     onComplete = _ref.onComplete,
     _ref$roles = _ref.roles,
@@ -7367,6 +7454,7 @@ var ManageMember = function ManageMember(_ref) {
   var haveToFetchRoles = ramda.isEmpty(roles) && isViewPermissionGranted;
   var isEditForm = !!selectedMember;
   var isLastPage = currentPage === FORM_PAGES.CONFIRMATION || isEditForm;
+  var isSubscriptionVisible = !isEditForm && ((_config$subscription = config.subscription) === null || _config$subscription === void 0 ? void 0 : _config$subscription.isActive);
   var _useFetchRoles = useFetchRoles({
       select: function select(response) {
         var _response$organizatio;
@@ -7466,6 +7554,9 @@ var ManageMember = function ManageMember(_ref) {
           emails: emails,
           selectedMember: selectedMember,
           innerRef: inputReference
+        }), isSubscriptionVisible && /*#__PURE__*/React__default["default"].createElement(SubscriptionPlan, {
+          handleClose: handleClose,
+          subscription: config.subscription
         }), /*#__PURE__*/React__default["default"].createElement(RolesRadioGroup, {
           config: config,
           globalRoles: globalRoles,
@@ -7586,7 +7677,7 @@ var Menu = function Menu(_ref) {
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TeamMembers = function TeamMembers(_ref) {
-  var _config$fetchApiRespo, _config$table, _config$table$onDropd;
+  var _config$fetchApiRespo, _config$table, _config$table$onDropd, _config$table2;
   var config = _ref.config;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -7678,7 +7769,7 @@ var TeamMembers = function TeamMembers(_ref) {
       memberFilter: filters.category,
       isSize: isSize
     });
-  }, [filters.category] // eslint-disable-line react-hooks/exhaustive-deps
+  }, [filters.category, (_config$table2 = config.table) === null || _config$table2 === void 0 ? void 0 : _config$table2.dropdownProps] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   var _useHiddenColumns = Columns$1.useHiddenColumns(TEAM_MEMBERS_HIDDEN_COLUMNS),
@@ -7817,4 +7908,5 @@ exports.VIEW_ROLES_PERMISSION = VIEW_ROLES_PERMISSION;
 exports.hasPermission = hasPermission;
 exports.refetchMembers = refetchMembers;
 exports.useFetchMembers = useFetchMembers;
+exports.useFetchMembersCountsPerCategory = useFetchMembersCountsPerCategory;
 //# sourceMappingURL=index.cjs.js.map