@bigbinary/neeto-team-members-frontend 4.2.0 → 4.2.1

package/dist/index.cjs.js

@@ -44,6 +44,7 @@ var Search$1 = require('@bigbinary/neeto-icons/Search');
 var Close = require('@bigbinary/neeto-icons/Close');
 var Input$1 = require('@bigbinary/neetoui/Input');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
+var neetoTimeZones = require('@bigbinary/neeto-time-zones');
 var ExternalLink = require('@bigbinary/neeto-icons/ExternalLink');
 var Callout = require('@bigbinary/neetoui/Callout');
 var Label = require('@bigbinary/neetoui/Label');
@@ -1820,6 +1821,7 @@ AssignList.MembersListItem = MembersListItem;
 AssignList.TeamsListItem = TeamsListItem;
 
 var MembersDropdown = function MembersDropdown(_ref) {
+  var _config$closeOnSelect, _jsx2;
   var config = _ref.config;
   var _useState = require$$0.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -1850,73 +1852,65 @@ var MembersDropdown = function MembersDropdown(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: dropdownRef,
-    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
-      className: "w-full",
-      closeOnSelect: false,
-      isOpen: isDropdownOpen,
-      position: "bottom-end",
-      ref: dropdownRef,
-      targetClassName: "w-full",
-      customTarget: function customTarget() {
-        return /*#__PURE__*/jsxRuntime.jsx(AssignDropdownTarget$2, {
-          selectedMember: config === null || config === void 0 ? void 0 : config.selectedMember
-        });
-      },
-      onClick: function onClick() {
-        return setIsDropdownOpen(ramda.not);
-      },
-      onClose: function onClose() {
-        return setSearchTerm("");
-      },
-      children: /*#__PURE__*/jsxRuntime.jsxs(AssignList, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(AssignList.Search, {
-          searchTerm: searchTerm,
-          handleClearSearchTerm: function handleClearSearchTerm() {
-            return setSearchTerm("");
-          },
-          placeholder: config === null || config === void 0 ? void 0 : config.searchPlaceholder,
-          onChange: function onChange(_ref2) {
-            var value = _ref2.target.value;
-            return setSearchTerm(value);
-          }
-        }), config !== null && config !== void 0 && config.isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex w-full items-center justify-center py-8",
-          children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
-        }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "ntm-assign-droplist__list-wrapper flex flex-col px-3",
-          children: [options.map(function (_ref3, index) {
-            var label = _ref3.label,
-              value = _ref3.value,
-              type = _ref3.type;
-            return /*#__PURE__*/jsxRuntime.jsxs(require$$0.Fragment, {
-              children: [type === SEARCH_TYPES.TEAM && /*#__PURE__*/jsxRuntime.jsx(AssignList.TeamsListItem, {
-                active: (config === null || config === void 0 ? void 0 : config.selectedTeam.id) === value,
-                teamName: label,
-                onClick: function onClick() {
-                  return config === null || config === void 0 ? void 0 : config.handleUpdate({
-                    id: (config === null || config === void 0 ? void 0 : config.selectedTeam.value) === value ? null : value,
-                    isTeam: true
-                  });
-                }
-              }), type === SEARCH_TYPES.MEMBER && /*#__PURE__*/jsxRuntime.jsx(AssignList.MembersListItem, {
-                active: (config === null || config === void 0 ? void 0 : config.selectedMember.value) === value,
-                memberName: label,
-                onClick: function onClick() {
-                  return handleClick(value);
-                }
-              })]
-            }, index);
-          }), ramda.isEmpty(options) && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex w-full items-center justify-center p-2",
-            children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-              "data-cy": "ticket-details-member-no-records-message",
-              style: "body2",
-              children: t("neetoTeamMembers.helpers.noRecords")
-            })
-          })]
-        }, searchTerm)]
-      })
-    })
+    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], (_jsx2 = {
+      closeOnSelect: (_config$closeOnSelect = config === null || config === void 0 ? void 0 : config.closeOnSelect) !== null && _config$closeOnSelect !== void 0 ? _config$closeOnSelect : true,
+      className: "w-full"
+    }, _defineProperty(_jsx2, "closeOnSelect", false), _defineProperty(_jsx2, "isOpen", isDropdownOpen), _defineProperty(_jsx2, "position", "bottom-end"), _defineProperty(_jsx2, "ref", dropdownRef), _defineProperty(_jsx2, "targetClassName", "w-full"), _defineProperty(_jsx2, "customTarget", function customTarget() {
+      return /*#__PURE__*/jsxRuntime.jsx(AssignDropdownTarget$2, {
+        selectedMember: config === null || config === void 0 ? void 0 : config.selectedMember
+      });
+    }), _defineProperty(_jsx2, "onClick", function onClick() {
+      return setIsDropdownOpen(ramda.not);
+    }), _defineProperty(_jsx2, "onClose", function onClose() {
+      return setSearchTerm("");
+    }), _defineProperty(_jsx2, "children", /*#__PURE__*/jsxRuntime.jsxs(AssignList, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(AssignList.Search, {
+        searchTerm: searchTerm,
+        handleClearSearchTerm: function handleClearSearchTerm() {
+          return setSearchTerm("");
+        },
+        placeholder: config === null || config === void 0 ? void 0 : config.searchPlaceholder,
+        onChange: function onChange(_ref2) {
+          var value = _ref2.target.value;
+          return setSearchTerm(value);
+        }
+      }), config !== null && config !== void 0 && config.isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex w-full items-center justify-center py-8",
+        children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ntm-assign-droplist__list-wrapper flex flex-col px-3",
+        children: [options.map(function (_ref3, index) {
+          var label = _ref3.label,
+            value = _ref3.value,
+            type = _ref3.type;
+          return /*#__PURE__*/jsxRuntime.jsxs(require$$0.Fragment, {
+            children: [type === SEARCH_TYPES.TEAM && /*#__PURE__*/jsxRuntime.jsx(AssignList.TeamsListItem, {
+              active: (config === null || config === void 0 ? void 0 : config.selectedTeam.id) === value,
+              teamName: label,
+              onClick: function onClick() {
+                return config === null || config === void 0 ? void 0 : config.handleUpdate({
+                  id: (config === null || config === void 0 ? void 0 : config.selectedTeam.value) === value ? null : value,
+                  isTeam: true
+                });
+              }
+            }), type === SEARCH_TYPES.MEMBER && /*#__PURE__*/jsxRuntime.jsx(AssignList.MembersListItem, {
+              active: (config === null || config === void 0 ? void 0 : config.selectedMember.value) === value,
+              memberName: label,
+              onClick: function onClick() {
+                return handleClick(value);
+              }
+            })]
+          }, index);
+        }), ramda.isEmpty(options) && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex w-full items-center justify-center p-2",
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            "data-cy": "ticket-details-member-no-records-message",
+            style: "body2",
+            children: t("neetoTeamMembers.helpers.noRecords")
+          })
+        })]
+      }, searchTerm)]
+    })), _jsx2))
   });
 };
 
@@ -2363,61 +2357,17 @@ var useFetchCountries = function useFetchCountries(options) {
   }, options));
 };
 
-var findTimeZoneAndCountry = function findTimeZoneAndCountry(timeZoneName, countries) {
-  return countries.reduce(function (acc, country) {
-    var timeZone = neetoCist.findBy({
-      name: timeZoneName
-    }, country.timeZones);
-    return timeZone ? {
-      country: country,
-      timeZone: timeZone
-    } : acc;
-  }, {
-    country: null,
-    timeZone: null
-  });
-};
-
-var useCountries = function useCountries(user) {
-  var _useState = require$$0.useState([]),
+var useCountries = function useCountries() {
+  var _useState = require$$0.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    timeZoneDropdownOptions = _useState2[0],
-    setTimeZoneDropdownOptions = _useState2[1];
-  var _useState3 = require$$0.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedCountryOption = _useState4[0],
-    setSelectedCountryOption = _useState4[1];
-  var _useState5 = require$$0.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedTimeZoneOption = _useState6[0],
-    setSelectedTimeZoneOption = _useState6[1];
+    selectedCountryOption = _useState2[0],
+    setSelectedCountryOption = _useState2[1];
   var _useFetchCountries = useFetchCountries(),
     _useFetchCountries$da = _useFetchCountries.data,
     _useFetchCountries$da2 = _useFetchCountries$da === void 0 ? {} : _useFetchCountries$da,
     _useFetchCountries$da3 = _useFetchCountries$da2.countries,
     countries = _useFetchCountries$da3 === void 0 ? [] : _useFetchCountries$da3,
     isLoading = _useFetchCountries.isLoading;
-  var formatTimeZoneOptions = function formatTimeZoneOptions(timeZones) {
-    return (timeZones === null || timeZones === void 0 ? void 0 : timeZones.map(formatTimeZoneOption)) || [];
-  };
-  var formatTimeZoneOption = function formatTimeZoneOption(timeZone) {
-    var currentTimeInUTC = new Date();
-    var options = {
-      timeZone: timeZone === null || timeZone === void 0 ? void 0 : timeZone.name,
-      hour12: true,
-      hour: "numeric",
-      minute: "numeric"
-    };
-    var currentTime = currentTimeInUTC.toLocaleString("en-US", options);
-    return {
-      label: i18next.t("neetoTeamMembers.profile.common.timeZoneOption", {
-        timeZone: ramda.replace("_", " ", timeZone === null || timeZone === void 0 ? void 0 : timeZone.name),
-        currentTime: currentTime
-      }),
-      value: timeZone === null || timeZone === void 0 ? void 0 : timeZone.id,
-      name: timeZone === null || timeZone === void 0 ? void 0 : timeZone.name
-    };
-  };
   var formatCountryOption = function formatCountryOption(country) {
     return {
       label: country === null || country === void 0 ? void 0 : country.name,
@@ -2431,34 +2381,14 @@ var useCountries = function useCountries(user) {
     setSelectedCountryOption(countryOption);
     var dependentFields = {};
     var selectedCountry = neetoCist.findById(countryOption.value, countries);
-    var timeZoneOptions = formatTimeZoneOptions(selectedCountry.timeZones);
-    setTimeZoneDropdownOptions(timeZoneOptions);
-    if (neetoCist.isNotEmpty(timeZoneOptions)) {
-      setSelectedTimeZoneOption(timeZoneOptions[0]);
-      dependentFields.timeZone = timeZoneOptions[0].name;
-    }
     dependentFields.dateFormat = selectedCountry.dateFormat;
     return dependentFields;
   };
-  require$$0.useEffect(function () {
-    if (!neetoCist.isPresent(countries)) return;
-    if (user !== null && user !== void 0 && user.timeZone) {
-      var _findTimeZoneAndCount = findTimeZoneAndCountry(user.timeZone, countries),
-        country = _findTimeZoneAndCount.country,
-        timeZone = _findTimeZoneAndCount.timeZone;
-      setSelectedCountryOption(formatCountryOption(country));
-      setTimeZoneDropdownOptions(formatTimeZoneOptions(country === null || country === void 0 ? void 0 : country.timeZones));
-      setSelectedTimeZoneOption(formatTimeZoneOption(timeZone));
-    }
-  }, [user, countries]);
   return {
     countryDropdownOptions: countryDropdownOptions,
-    timeZoneDropdownOptions: timeZoneDropdownOptions,
     selectedCountryOption: selectedCountryOption,
-    selectedTimeZoneOption: selectedTimeZoneOption,
     isFetchingCountriesList: isLoading,
-    handleCountryChange: handleCountryChange,
-    handleTimeZoneChange: setSelectedTimeZoneOption
+    handleCountryChange: handleCountryChange
   };
 };
 
@@ -2599,20 +2529,33 @@ var ChangeProfile = function ChangeProfile(_ref) {
     _user$timeZone = user.timeZone,
     timeZone = _user$timeZone === void 0 ? "" : _user$timeZone,
     _user$profileImageUrl = user.profileImageUrl,
-    profileImageUrl = _user$profileImageUrl === void 0 ? "" : _user$profileImageUrl;
-  var _useCountries = useCountries(user),
+    profileImageUrl = _user$profileImageUrl === void 0 ? "" : _user$profileImageUrl,
+    _user$countryId = user.countryId,
+    countryId = _user$countryId === void 0 ? "" : _user$countryId;
+  var _useCountries = useCountries(),
     countryDropdownOptions = _useCountries.countryDropdownOptions,
-    timeZoneDropdownOptions = _useCountries.timeZoneDropdownOptions,
     selectedCountryOption = _useCountries.selectedCountryOption,
-    selectedTimeZoneOption = _useCountries.selectedTimeZoneOption,
     isFetchingCountriesList = _useCountries.isFetchingCountriesList,
     _useCountries$handleC = _useCountries.handleCountryChange,
-    handleCountryChange = _useCountries$handleC === void 0 ? neetoCist.noop : _useCountries$handleC,
-    _useCountries$handleT = _useCountries.handleTimeZoneChange,
-    handleTimeZoneChange = _useCountries$handleT === void 0 ? neetoCist.noop : _useCountries$handleT;
+    handleCountryChange = _useCountries$handleC === void 0 ? neetoCist.noop : _useCountries$handleC;
   var _useUpdateProfileMuta = useUpdateProfileMutation(),
     updateProfile = _useUpdateProfileMuta.mutate,
     isUpdatingProfile = _useUpdateProfileMuta.isPending;
+  var timezoneRef = require$$0.useCallback(function (_ref2) {
+    var node = _ref2.node,
+      setFieldValue = _ref2.setFieldValue;
+    if (ramda.isNotNil(node)) {
+      new neetoTimeZones.NeetoTimezoneSelector(node, {
+        className: "w-full z-10",
+        position: "bottom",
+        initialValue: timeZone,
+        onChange: function onChange(_ref3) {
+          var utc = _ref3.utc;
+          return setFieldValue("timeZone", utc[0]);
+        }
+      });
+    }
+  }, [timeZone]);
   var initialFormValues = {
     firstName: firstName,
     lastName: lastName,
@@ -2624,7 +2567,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     }
   };
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
       var avatar, _yield$handleUploadIm, fileId, filePath, url, payload;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -2661,7 +2604,6 @@ var ChangeProfile = function ChangeProfile(_ref) {
             };
           case 14:
             payload = _objectSpread$i(_objectSpread$i({}, values), {}, {
-              timeZone: selectedTimeZoneOption === null || selectedTimeZoneOption === void 0 ? void 0 : selectedTimeZoneOption.name,
               avatar: avatar
             });
             updateProfile({
@@ -2681,9 +2623,17 @@ var ChangeProfile = function ChangeProfile(_ref) {
       }, _callee, null, [[0, 18]]);
     }));
     return function handleSubmit(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
+  require$$0.useEffect(function () {
+    var country = neetoCist.findBy({
+      value: countryId
+    }, countryDropdownOptions);
+    if (country) {
+      handleCountryChange(country);
+    }
+  }, [countryId]);
   if (isUpdatingProfile || isFetchingCountriesList || isFetchingUserDetails) {
     return /*#__PURE__*/jsxRuntime.jsx(Container__default["default"], {
       children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
@@ -2698,9 +2648,11 @@ var ChangeProfile = function ChangeProfile(_ref) {
       validationSchema: PROFILE_VALIDATION_SCHEMA,
       onSubmit: handleSubmit
     },
-    children: function children(_ref3) {
-      var setFieldValue = _ref3.setFieldValue,
-        values = _ref3.values;
+    children: function children(_ref5) {
+      var setFieldValue = _ref5.setFieldValue,
+        values = _ref5.values,
+        errors = _ref5.errors,
+        touched = _ref5.touched;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
           className: "w-full",
@@ -2736,31 +2688,36 @@ var ChangeProfile = function ChangeProfile(_ref) {
               onChange: function onChange(option) {
                 var dependentFields = handleCountryChange(option);
                 setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
-                setFieldValue("timeZone", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.timeZone);
+                setFieldValue("countryId", option === null || option === void 0 ? void 0 : option.value);
               }
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "space-y-2",
-              children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
-                required: true,
-                "data-cy": "ntm-profile-time-zone-select",
-                name: "timeZoneId",
-                options: timeZoneDropdownOptions,
-                value: selectedTimeZoneOption,
-                label: t("neetoTeamMembers.profile.inputs.label.selectTimeZone"),
-                onChange: function onChange(option) {
-                  setFieldValue("timeZone", option === null || option === void 0 ? void 0 : option.name);
-                  handleTimeZoneChange(option);
-                }
-              })
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+                  required: true,
+                  children: t("neetoTeamMembers.profile.inputs.label.selectTimeZone")
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "w-full flex-grow",
+                  "data-cy": "ntm-profile-time-zone-select",
+                  ref: function ref(node) {
+                    return timezoneRef({
+                      node: node,
+                      setFieldValue: setFieldValue
+                    });
+                  }
+                })]
+              }), touched.timeZone && errors.timeZone && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                children: errors.timeZone
+              })]
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
                 required: true,
                 children: t("neetoTeamMembers.profile.inputs.label.dateFormat")
               }), /*#__PURE__*/jsxRuntime.jsx(Radio__default["default"], {
                 className: "mt-2 space-x-4",
-                children: DATE_FORMAT_OPTIONS.map(function (_ref4) {
-                  var label = _ref4.label,
-                    value = _ref4.value;
+                children: DATE_FORMAT_OPTIONS.map(function (_ref6) {
+                  var label = _ref6.label,
+                    value = _ref6.value;
                   return /*#__PURE__*/require$$0.createElement(Radio__default["default"].Item, {
                     label: label,
                     value: value,
@@ -10082,6 +10039,7 @@ var AssignDropdownTarget = function AssignDropdownTarget(_ref) {
 };
 
 var TeamsDropdown = function TeamsDropdown(_ref) {
+  var _config$closeOnSelect;
   var config = _ref.config;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -10094,10 +10052,11 @@ var TeamsDropdown = function TeamsDropdown(_ref) {
     var _config$availableTeam;
     return config === null || config === void 0 || (_config$availableTeam = config.availableTeams) === null || _config$availableTeam === void 0 ? void 0 : _config$availableTeam.filter(function (_ref2) {
       var label = _ref2.label;
-      return label.toLowerCase().includes(trimmedSearchTerm.toLowerCase());
+      return label === null || label === void 0 ? void 0 : label.toLowerCase().includes(trimmedSearchTerm.toLowerCase());
     });
   }, [config === null || config === void 0 ? void 0 : config.availableTeams, trimmedSearchTerm]);
   return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+    closeOnSelect: (_config$closeOnSelect = config === null || config === void 0 ? void 0 : config.closeOnSelect) !== null && _config$closeOnSelect !== void 0 ? _config$closeOnSelect : true,
     className: "w-full",
     customTarget: function customTarget() {
       return /*#__PURE__*/jsxRuntime.jsx(AssignDropdownTarget, {