@bigbinary/neeto-team-members-frontend 5.0.20 → 5.0.21

package/dist/{index-Bypsb7E3.js → index-C0KE_pv7.js}

@@ -1,11 +1,14 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { taxonomies, globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import { getQueryParams, buildUrl, hyphenize, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import Info from '@bigbinary/neeto-icons/Info';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import { useProfileImageUpload } from '@bigbinary/neeto-image-uploader-frontend/hooks';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
 import Toastr from '@bigbinary/neetoui/Toastr';
@@ -16,7 +19,8 @@ import Form from '@bigbinary/neetoui/formik/Form';
 import { clamp, curry, filter, identical, mergeLeft, assoc, not, pluck, isEmpty, head, reverse, groupBy, prop } from 'ramda';
 import { Trans, useTranslation } from 'react-i18next';
 import { u as useFetchRoles, a as useFetchGlobalRoles, S as ScrollToErrorField } from './index-_hZkDXWE.js';
-import { u as useFetchMembers, b as useCreateMember, c as useMembersCreationStatus, r as refetchMembers, d as useUpdateMember } from './useTeamsApi-DZBA2Gi6.js';
+import { u as useCountries, a as ProfileImage } from './ProfileImage-B1HLSck6.js';
+import { u as useFetchMembers, f as useFetchMember, g as useCreateMember, h as useMembersCreationStatus, r as refetchMembers, e as useUpdateMember } from './useTeamsApi-o6xkPbuf.js';
 import { n } from './inject-css-DmrvuTKK.js';
 import { useFormikContext } from 'formik';
 import { isNotEmpty, toLabelAndValue, filterBy, findBy } from '@bigbinary/neeto-cist';
@@ -24,20 +28,21 @@ import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Switch from '@bigbinary/neetoui/formik/Switch';
-import { N as NEETO_AUTH_MANAGE_PRODUCT_URL, g as getSingleInvitationTranslationProps, a as getInviteURL, r as remainingExpiryDays, F as FORM_PAGES, C as COUNTER_PROPS, b as FILTER_INVALID_EMAILS, E as EMAIL_REGEX, D as DEFAULT_COMPONENT_CONFIG, M as MEMBERS_FORM_COMPONENT_MAPPER, c as renderInitialValues, d as buildValidationSchema, e as renderPayload, R as RolesRadioGroup } from './RolesRadioGroup-DMJ2ayZP.js';
+import { N as NEETO_AUTH_MANAGE_PRODUCT_URL, g as getSingleInvitationTranslationProps, a as getInviteURL, r as remainingExpiryDays, F as FORM_PAGES, C as COUNTER_PROPS, b as FILTER_INVALID_EMAILS, E as EMAIL_REGEX, D as DEFAULT_COMPONENT_CONFIG, M as MEMBERS_FORM_COMPONENT_MAPPER, c as renderInitialValues, d as buildValidationSchema, e as renderPayload, R as RolesRadioGroup } from './RolesRadioGroup-DjdqIC_k.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, SINGULAR, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, SINGULAR, PLURAL, LANGUAGE_OPTIONS } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
-import { B as BASE_URL, Q as QUERY_KEYS } from './constants-CbaUJ-B2.js';
+import { B as BASE_URL, Q as QUERY_KEYS, T as TIME_FORMAT_OPTIONS, D as DATE_FORMAT_OPTIONS } from './constants-CbaUJ-B2.js';
 import Label from '@bigbinary/neetoui/Label';
 import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
 import Input from '@bigbinary/neetoui/formik/Input';
 import { isNeetoAuthApp } from './utils.js';
+import { NeetoTimezoneSelector } from '@bigbinary/neeto-time-zones';
 import i18next from 'i18next';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Avatar from '@bigbinary/neetoui/Avatar';
@@ -784,6 +789,100 @@ var NameInputs = function NameInputs(_ref) {
   });
 };
 
+var ProfileSettings = function ProfileSettings(_ref) {
+  var member = _ref.member,
+    setFieldValue = _ref.setFieldValue,
+    isTimezoneFieldDisabled = _ref.isTimezoneFieldDisabled;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var setFieldValueRef = useRef(setFieldValue);
+  useEffect(function () {
+    setFieldValueRef.current = setFieldValue;
+  }, [setFieldValue]);
+  var _useCountries = useCountries(),
+    countryDropdownOptions = _useCountries.countryDropdownOptions,
+    selectedCountryOption = _useCountries.selectedCountryOption,
+    isFetchingCountriesList = _useCountries.isFetchingCountriesList,
+    handleCountryChange = _useCountries.handleCountryChange;
+  var timezoneContainerRef = useRef(null);
+  useEffect(function () {
+    var node = timezoneContainerRef.current;
+    if (!node) return undefined;
+    new NeetoTimezoneSelector(node, {
+      isTimeFormat24H: member.timeFormat === "24h",
+      className: "w-full z-10",
+      position: "bottom",
+      initialValue: member.timeZone,
+      onChange: function onChange(_ref2) {
+        var main = _ref2.main;
+        return setFieldValueRef.current("timeZone", main);
+      },
+      disabled: isTimezoneFieldDisabled
+    });
+    return function () {
+      node.innerHTML = "";
+    };
+  }, [member.timeZone, member.timeFormat, isTimezoneFieldDisabled]);
+  useEffect(function () {
+    var country = findBy({
+      value: member.countryIdentifier
+    }, countryDropdownOptions);
+    if (country) handleCountryChange(country);
+  }, [member.countryIdentifier, countryDropdownOptions, handleCountryChange]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
+    "data-cy": "ntm-profile-settings",
+    children: [/*#__PURE__*/jsx(Select, {
+      "data-cy": "ntm-edit-member-country-select",
+      isLoading: isFetchingCountriesList,
+      label: t("neetoTeamMembers.profile.inputs.label.country"),
+      name: "countryId",
+      options: countryDropdownOptions,
+      value: selectedCountryOption,
+      onChange: function onChange(option) {
+        var dependentFields = handleCountryChange(option);
+        setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
+        setFieldValue("countryId", option === null || option === void 0 ? void 0 : option.value);
+      }
+    }), /*#__PURE__*/jsx(Select, {
+      "data-cy": "ntm-edit-member-language-select",
+      label: t("neetoTeamMembers.profile.inputs.label.language"),
+      name: "language",
+      options: LANGUAGE_OPTIONS,
+      onChange: function onChange(option) {
+        return setFieldValue("language", option.value);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        children: t("neetoTeamMembers.profile.inputs.label.timeZone")
+      }), /*#__PURE__*/jsx("div", {
+        "data-cy": "ntm-edit-member-timezone-select",
+        ref: timezoneContainerRef,
+        className: classnames("w-full grow", {
+          "neeto-ui-bg-gray-100 pointer-events-none": isTimezoneFieldDisabled
+        })
+      })]
+    }), /*#__PURE__*/jsx(Select, {
+      "data-cy": "ntm-edit-member-time-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
+      name: "timeFormat",
+      options: TIME_FORMAT_OPTIONS,
+      onChange: function onChange(option) {
+        return setFieldValue("timeFormat", option.value);
+      }
+    }), /*#__PURE__*/jsx(Select, {
+      "data-cy": "ntm-edit-member-date-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
+      name: "dateFormat",
+      options: DATE_FORMAT_OPTIONS,
+      onChange: function onChange(option) {
+        return setFieldValue("dateFormat", option.value);
+      }
+    })]
+  });
+};
+
 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 ManageMember = function ManageMember(_ref) {
@@ -808,6 +907,12 @@ var ManageMember = function ManageMember(_ref) {
       enabled: isViewPermissionGranted
     }),
     team = _useFetchMembers.data;
+  var _useFetchMember = useFetchMember(selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.id, {
+      enabled: !!selectedMember
+    }),
+    memberShowData = _useFetchMember.data,
+    isMemberDetailLoading = _useFetchMember.isLoading;
+  var isTimezoneFieldDisabled = selectedMember && memberShowData && !selectedMember.isOwner && !memberShowData.timezoneChangeEnabled;
   var _useState3 = useState(FORM_PAGES.MAIN),
     _useState4 = _slicedToArray(_useState3, 2),
     currentPage = _useState4[0],
@@ -917,26 +1022,149 @@ var ManageMember = function ManageMember(_ref) {
     };
     setIsCreationStatusPollingEnabled(false);
   };
-  var isProcessing = isCreatingMember || isUpdatingMember || isRolesLoading || isGlobalRolesLoading;
-  var handleAddMember = function handleAddMember(values) {
-    selectedMember ? updateMember({
-      id: selectedMember.id,
-      payload: renderPayload(values, selectedMember)
-    }) : createMember(renderPayload(values));
-  };
-  var handleOnSubmit = function handleOnSubmit(values, _ref5) {
-    var setSubmitting = _ref5.setSubmitting;
-    shouldSkipAppListPage.current = isEmpty(values.appRoles);
-    if (isLastPage) {
-      handleAddMember(values);
-    } else if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
-      setCurrentPage(FORM_PAGES.CONFIRMATION);
-      setSubmitting(false);
-    } else if (currentPage === FORM_PAGES.MAIN) {
-      setCurrentPage(FORM_PAGES.APP_LIST);
-      setSubmitting(false);
-    }
-  };
+  var _useProfileImageUploa = useProfileImageUpload({
+      uploadConfig: {
+        folder: "Auth",
+        customMetadata: {
+          appName: "neetoAuth"
+        }
+      }
+    }),
+    uploadImage = _useProfileImageUploa.uploadImage,
+    isUploading = _useProfileImageUploa.isUploading;
+  var handleUploadImage = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var result, didUpload;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            didUpload = false;
+            _context.next = 3;
+            return uploadImage(image, function (uploadedImageData) {
+              didUpload = true;
+              result = uploadedImageData;
+            });
+          case 3:
+            if (didUpload) {
+              _context.next = 5;
+              break;
+            }
+            throw new Error(t("neetoTeamMembers.common.imageUploadFailed"));
+          case 5:
+            return _context.abrupt("return", result);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleUploadImage(_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var isProcessing = isCreatingMember || isUpdatingMember || isUploading || isRolesLoading || isGlobalRolesLoading || isMemberDetailLoading;
+  var handleAddMember = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values) {
+      var _values$avatar, payload, _yield$handleUploadIm, fileId, filePath, url;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!selectedMember) {
+              _context2.next = 25;
+              break;
+            }
+            payload = renderPayload(values, selectedMember);
+            if (!((_values$avatar = values.avatar) !== null && _values$avatar !== void 0 && _values$avatar.file)) {
+              _context2.next = 22;
+              break;
+            }
+            if (!payload.profile) payload.profile = {};
+            if (!(values.avatar.file === "_destroy")) {
+              _context2.next = 8;
+              break;
+            }
+            payload.profile.avatar = {
+              fileId: "_destroy",
+              filePath: "",
+              url: ""
+            };
+            _context2.next = 22;
+            break;
+          case 8:
+            _context2.prev = 8;
+            _context2.next = 11;
+            return handleUploadImage(values.avatar.file);
+          case 11:
+            _yield$handleUploadIm = _context2.sent;
+            fileId = _yield$handleUploadIm.fileId;
+            filePath = _yield$handleUploadIm.filePath;
+            url = _yield$handleUploadIm.url;
+            payload.profile.avatar = {
+              fileId: fileId,
+              filePath: filePath,
+              url: url
+            };
+            _context2.next = 22;
+            break;
+          case 18:
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](8);
+            Toastr.error(_context2.t0.message);
+            return _context2.abrupt("return");
+          case 22:
+            updateMember({
+              id: selectedMember.id,
+              payload: payload
+            });
+            _context2.next = 26;
+            break;
+          case 25:
+            createMember(renderPayload(values));
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[8, 18]]);
+    }));
+    return function handleAddMember(_x2) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var handleOnSubmit = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(values, _ref7) {
+      var setSubmitting;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setSubmitting = _ref7.setSubmitting;
+            shouldSkipAppListPage.current = isEmpty(values.appRoles);
+            if (!isLastPage) {
+              _context3.next = 7;
+              break;
+            }
+            _context3.next = 5;
+            return handleAddMember(values);
+          case 5:
+            _context3.next = 8;
+            break;
+          case 7:
+            if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
+              setCurrentPage(FORM_PAGES.CONFIRMATION);
+              setSubmitting(false);
+            } else if (currentPage === FORM_PAGES.MAIN) {
+              setCurrentPage(FORM_PAGES.APP_LIST);
+              setSubmitting(false);
+            }
+          case 8:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function handleOnSubmit(_x3, _x4) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
   var handleBackButton = function handleBackButton() {
     if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current || currentPage === FORM_PAGES.INVITE_LINK) {
       setCurrentPage(FORM_PAGES.MAIN);
@@ -964,18 +1192,22 @@ var ManageMember = function ManageMember(_ref) {
       roles: filteredRoles
     });
   };
-  var renderFormPage = function renderFormPage(page, emails, role) {
+  var renderFormPage = function renderFormPage(page, emails, role, setFieldValue) {
     var _config$additionalFie;
     switch (page) {
       case FORM_PAGES.MAIN:
         return /*#__PURE__*/jsxs(Fragment, {
-          children: [selectedMember && /*#__PURE__*/jsx(NameInputs, {
+          children: [selectedMember && /*#__PURE__*/jsx(ProfileImage, {}), selectedMember && /*#__PURE__*/jsx(NameInputs, {
             innerRef: inputReference
           }), /*#__PURE__*/jsx(MultipleEmailInput, {
             emails: emails,
             selectedMember: selectedMember,
             setCurrentPage: setCurrentPage,
             innerRef: inputReference
+          }), selectedMember && /*#__PURE__*/jsx(ProfileSettings, {
+            isTimezoneFieldDisabled: isTimezoneFieldDisabled,
+            setFieldValue: setFieldValue,
+            member: selectedMember
           }), renderRolesRadioGroup(role), (_config$additionalFie = config.additionalFields) === null || _config$additionalFie === void 0 ? void 0 : _config$additionalFie.component]
         });
       case FORM_PAGES.APP_LIST:
@@ -1023,6 +1255,10 @@ var ManageMember = function ManageMember(_ref) {
         style: "h2",
         weight: "semibold",
         children: getTitle()
+      }), selectedMember && /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-600",
+        style: "body2",
+        children: t("neetoTeamMembers.helpers.editPaneSubtitle")
       })]
     })), /*#__PURE__*/jsx(Form, {
       ref: formReference,
@@ -1039,11 +1275,12 @@ var ManageMember = function ManageMember(_ref) {
           selectedMember: selectedMember
         }, team))
       },
-      children: function children(_ref6) {
+      children: function children(_ref9) {
         var _manageMemberComponen2, _manageMemberComponen3;
-        var values = _ref6.values,
-          isValid = _ref6.isValid,
-          dirty = _ref6.dirty;
+        var values = _ref9.values,
+          isValid = _ref9.isValid,
+          dirty = _ref9.dirty,
+          setFieldValue = _ref9.setFieldValue;
         var emails = values.emails,
           role = values.role;
         formikValues.current = values;
@@ -1061,7 +1298,7 @@ var ManageMember = function ManageMember(_ref) {
               }), t("neetoTeamMembers.helpers.memberCreationStatus", {
                 count: emails.length
               })]
-            }), renderFormPage(currentPage, emails, role)]
+            }), renderFormPage(currentPage, emails, role, setFieldValue)]
           })), currentPage !== FORM_PAGES.INVITE_LINK && /*#__PURE__*/jsx(Component.Footer, _objectSpread(_objectSpread({}, manageMemberComponentConfig.footerProps), {}, {
             className: classnames(["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className]),
             children: /*#__PURE__*/jsx(ActionBlock, {
@@ -1086,4 +1323,4 @@ var ManageMember = function ManageMember(_ref) {
 };
 
 export { DEFAULT_FILTER_VALUES as D, ManageMember as M, DEFAULT_IS_OPEN_VALUES as a, buildFilterColumns as b, DEFAULT_SELECTED_ROWS as c, defaultNeetoFiltersColumns as d, getColumnData as e, generateNoDataContent as f, getFilteredRoles as g, handlePageChange as h, DEFAULT_RADIX as i, renderUpdateAlert as j, renderPaginationProps as r };
-//# sourceMappingURL=index-Bypsb7E3.js.map
+//# sourceMappingURL=index-C0KE_pv7.js.map