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

package/dist/{index-wgft0T5n.js → index-Dpeqvj1R.js}

@@ -1,13 +1,16 @@
 'use strict';
 
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var React = require('react');
 var classnames = require('classnames');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Info = require('@bigbinary/neeto-icons/Info');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var hooks = require('@bigbinary/neeto-image-uploader-frontend/hooks');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Toastr = require('@bigbinary/neetoui/Toastr');
@@ -18,7 +21,8 @@ var Form = require('@bigbinary/neetoui/formik/Form');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var index = require('./index-Dn1xXV16.js');
-var useTeamsApi = require('./useTeamsApi-ByaAsGOl.js');
+var ProfileImage = require('./ProfileImage-NrUFZWFQ.js');
+var useTeamsApi = require('./useTeamsApi-BDvsXvSN.js');
 var injectCss = require('./inject-css-vQvjPR2x.js');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
@@ -26,7 +30,7 @@ var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var Select = require('@bigbinary/neetoui/formik/Select');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
-var RolesRadioGroup = require('./RolesRadioGroup-DbaYg-Hy.js');
+var RolesRadioGroup = require('./RolesRadioGroup-BCrw7ji3.js');
 var jsxRuntime = require('react/jsx-runtime');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -40,6 +44,7 @@ var Label = require('@bigbinary/neetoui/Label');
 var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var utils$1 = require('./cjs/utils.js');
+var neetoTimeZones = require('@bigbinary/neeto-time-zones');
 var i18next = require('i18next');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Avatar = require('@bigbinary/neetoui/Avatar');
@@ -786,6 +791,100 @@ var NameInputs = function NameInputs(_ref) {
   });
 };
 
+var ProfileSettings = function ProfileSettings(_ref) {
+  var member = _ref.member,
+    setFieldValue = _ref.setFieldValue,
+    isTimezoneFieldDisabled = _ref.isTimezoneFieldDisabled;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var setFieldValueRef = React.useRef(setFieldValue);
+  React.useEffect(function () {
+    setFieldValueRef.current = setFieldValue;
+  }, [setFieldValue]);
+  var _useCountries = ProfileImage.useCountries(),
+    countryDropdownOptions = _useCountries.countryDropdownOptions,
+    selectedCountryOption = _useCountries.selectedCountryOption,
+    isFetchingCountriesList = _useCountries.isFetchingCountriesList,
+    handleCountryChange = _useCountries.handleCountryChange;
+  var timezoneContainerRef = React.useRef(null);
+  React.useEffect(function () {
+    var node = timezoneContainerRef.current;
+    if (!node) return undefined;
+    new neetoTimeZones.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]);
+  React.useEffect(function () {
+    var country = neetoCist.findBy({
+      value: member.countryIdentifier
+    }, countryDropdownOptions);
+    if (country) handleCountryChange(country);
+  }, [member.countryIdentifier, countryDropdownOptions, handleCountryChange]);
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(Select, {
+      "data-cy": "ntm-edit-member-language-select",
+      label: t("neetoTeamMembers.profile.inputs.label.language"),
+      name: "language",
+      options: constants.LANGUAGE_OPTIONS,
+      onChange: function onChange(option) {
+        return setFieldValue("language", option.value);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        children: t("neetoTeamMembers.profile.inputs.label.timeZone")
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Select, {
+      "data-cy": "ntm-edit-member-time-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
+      name: "timeFormat",
+      options: constants$1.TIME_FORMAT_OPTIONS,
+      onChange: function onChange(option) {
+        return setFieldValue("timeFormat", option.value);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+      "data-cy": "ntm-edit-member-date-format-select",
+      label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
+      name: "dateFormat",
+      options: constants$1.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) {
@@ -810,6 +909,12 @@ var ManageMember = function ManageMember(_ref) {
       enabled: isViewPermissionGranted
     }),
     team = _useFetchMembers.data;
+  var _useFetchMember = useTeamsApi.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 = React.useState(RolesRadioGroup.FORM_PAGES.MAIN),
     _useState4 = _slicedToArray(_useState3, 2),
     currentPage = _useState4[0],
@@ -919,26 +1024,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: RolesRadioGroup.renderPayload(values, selectedMember)
-    }) : createMember(RolesRadioGroup.renderPayload(values));
-  };
-  var handleOnSubmit = function handleOnSubmit(values, _ref5) {
-    var setSubmitting = _ref5.setSubmitting;
-    shouldSkipAppListPage.current = ramda.isEmpty(values.appRoles);
-    if (isLastPage) {
-      handleAddMember(values);
-    } else if (currentPage === RolesRadioGroup.FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
-      setCurrentPage(RolesRadioGroup.FORM_PAGES.CONFIRMATION);
-      setSubmitting(false);
-    } else if (currentPage === RolesRadioGroup.FORM_PAGES.MAIN) {
-      setCurrentPage(RolesRadioGroup.FORM_PAGES.APP_LIST);
-      setSubmitting(false);
-    }
-  };
+  var _useProfileImageUploa = hooks.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 = RolesRadioGroup.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(RolesRadioGroup.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 = ramda.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 === RolesRadioGroup.FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
+              setCurrentPage(RolesRadioGroup.FORM_PAGES.CONFIRMATION);
+              setSubmitting(false);
+            } else if (currentPage === RolesRadioGroup.FORM_PAGES.MAIN) {
+              setCurrentPage(RolesRadioGroup.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 === RolesRadioGroup.FORM_PAGES.APP_LIST || shouldSkipAppListPage.current || currentPage === RolesRadioGroup.FORM_PAGES.INVITE_LINK) {
       setCurrentPage(RolesRadioGroup.FORM_PAGES.MAIN);
@@ -966,18 +1194,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 RolesRadioGroup.FORM_PAGES.MAIN:
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [selectedMember && /*#__PURE__*/jsxRuntime.jsx(NameInputs, {
+          children: [selectedMember && /*#__PURE__*/jsxRuntime.jsx(ProfileImage.ProfileImage, {}), selectedMember && /*#__PURE__*/jsxRuntime.jsx(NameInputs, {
             innerRef: inputReference
           }), /*#__PURE__*/jsxRuntime.jsx(MultipleEmailInput, {
             emails: emails,
             selectedMember: selectedMember,
             setCurrentPage: setCurrentPage,
             innerRef: inputReference
+          }), selectedMember && /*#__PURE__*/jsxRuntime.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 RolesRadioGroup.FORM_PAGES.APP_LIST:
@@ -1025,6 +1257,10 @@ var ManageMember = function ManageMember(_ref) {
         style: "h2",
         weight: "semibold",
         children: getTitle()
+      }), selectedMember && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-text-gray-600",
+        style: "body2",
+        children: t("neetoTeamMembers.helpers.editPaneSubtitle")
       })]
     })), /*#__PURE__*/jsxRuntime.jsx(Form, {
       ref: formReference,
@@ -1041,11 +1277,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;
@@ -1063,7 +1300,7 @@ var ManageMember = function ManageMember(_ref) {
               }), t("neetoTeamMembers.helpers.memberCreationStatus", {
                 count: emails.length
               })]
-            }), renderFormPage(currentPage, emails, role)]
+            }), renderFormPage(currentPage, emails, role, setFieldValue)]
           })), currentPage !== RolesRadioGroup.FORM_PAGES.INVITE_LINK && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(ActionBlock, {
@@ -1100,4 +1337,4 @@ exports.getFilteredRoles = getFilteredRoles;
 exports.handlePageChange = handlePageChange;
 exports.renderPaginationProps = renderPaginationProps;
 exports.renderUpdateAlert = renderUpdateAlert;
-//# sourceMappingURL=index-wgft0T5n.js.map
+//# sourceMappingURL=index-Dpeqvj1R.js.map