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

package/dist/TeamMembers.js

@@ -18,11 +18,11 @@ import { mergeLeft, isNil, assoc, pluck, filter, includes, trim, toLower, revers
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { w as withReactQuery } from './withReactQuery-CHybbL5V.js';
-import { u as useFetchRoles } from './index-C3B4Tkzb.js';
-import { e as useFetchFilterOptions, f as useBulkUpdateMembers, u as useFetchMembers, d as useUpdateMember } from './useTeamsApi-1Zy6Vd6v.js';
+import { u as useFetchRoles } from './index-Dvjcz-b3.js';
+import { e as useFetchFilterOptions, f as useBulkUpdateMembers, u as useFetchMembers, d as useUpdateMember } from './useTeamsApi-DReZnkbo.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { buildFiltersFromURL } from '@bigbinary/neeto-filters-frontend/utils';
-import { d as defaultNeetoFiltersColumns, D as DEFAULT_FILTER_VALUES, b as buildFilterColumns, a as DEFAULT_IS_OPEN_VALUES, c as DEFAULT_SELECTED_ROWS, h as handlePageChange, T as TEAM_MEMBERS_HIDDEN_COLUMNS, g as getFilteredRoles, e as getColumnData, f as generateNoDataContent, i as DEFAULT_RADIX, r as renderPaginationProps, M as ManageMember, j as renderUpdateAlert } from './index-DIett4kG.js';
+import { d as defaultNeetoFiltersColumns, D as DEFAULT_FILTER_VALUES, b as buildFilterColumns, a as DEFAULT_IS_OPEN_VALUES, c as DEFAULT_SELECTED_ROWS, h as handlePageChange, T as TEAM_MEMBERS_HIDDEN_COLUMNS, g as getFilteredRoles, e as getColumnData, f as generateNoDataContent, i as DEFAULT_RADIX, r as renderPaginationProps, M as ManageMember, j as renderUpdateAlert } from './index-CKp_a6SU.js';
 import { n } from './inject-css-DmrvuTKK.js';
 import { noop, isNotEmpty, hyphenate, findBy } from '@bigbinary/neeto-cist';
 import Button from '@bigbinary/neetoui/Button';
@@ -39,7 +39,7 @@ import '@tanstack/react-query';
 import './queryClient-Dsu-gu4Y.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import 'axios';
-import './constants-BYGIelYc.js';
+import './constants-BdTiHt55.js';
 import 'formik';
 import 'qs';
 import 'classnames';
@@ -52,7 +52,7 @@ import '@bigbinary/neetoui/formik/Form';
 import '@bigbinary/neetoui/Checkbox';
 import '@bigbinary/neetoui/formik/Select';
 import '@bigbinary/neetoui/formik/Switch';
-import './RolesRadioGroup-Cwdovd4_.js';
+import './RolesRadioGroup-Bxt7zZkh.js';
 import '@bigbinary/neetoui/Label';
 import '@bigbinary/neetoui/formik/Radio';
 import 'yup';

package/dist/cjs/Groups.js

@@ -13,7 +13,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactQuery = require('@tanstack/react-query');
 var ramda = require('ramda');
 var axios = require('axios');
-var constants = require('../constants-CmhmtttG.js');
+var constants = require('../constants-CVJk8LWV.js');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Typography = require('@bigbinary/neetoui/Typography');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -39,7 +39,7 @@ var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var utils$1 = require('./utils.js');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('../_commonjsHelpers-BJu3ubxk.js');
-require('../useTeamsApi-BC2K4Ol1.js');
+require('../useTeamsApi-DMq-AW7A.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('qs');
 require('../queryClient-4vAFE3bx.js');

package/dist/cjs/ManageMember.js

@@ -17,17 +17,17 @@ require('@bigbinary/neetoui/formik/ActionBlock');
 require('@bigbinary/neetoui/formik/Form');
 require('ramda');
 require('react-i18next');
-require('../index-C54nXmSx.js');
-require('../useTeamsApi-BC2K4Ol1.js');
-var ManageMember = require('../index-BzXDzsrQ.js');
-require('../RolesRadioGroup-Cj_ehpnj.js');
+require('../index-CWyeI4Kz.js');
+require('../useTeamsApi-DMq-AW7A.js');
+var ManageMember = require('../index-yFl2aYDN.js');
+require('../RolesRadioGroup-CGjcYVyV.js');
 require('react/jsx-runtime');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-cist');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('axios');
-require('../constants-CmhmtttG.js');
+require('../constants-CVJk8LWV.js');
 require('i18next');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('@babel/runtime/helpers/toConsumableArray');

package/dist/cjs/Profile.js

@@ -1,6 +1,9 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var require$$0 = require('react');
+var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
@@ -8,14 +11,10 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var require$$0 = require('react');
 var hooks = require('@bigbinary/neeto-image-uploader-frontend/hooks');
 var neetoTimeZones = require('@bigbinary/neeto-time-zones');
 var neetoCist = require('@bigbinary/neeto-cist');
-var Button = require('@bigbinary/neetoui/Button');
-var Callout = require('@bigbinary/neetoui/Callout');
 var Label = require('@bigbinary/neetoui/Label');
-var Radio = require('@bigbinary/neetoui/Radio');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var Input = require('@bigbinary/neetoui/formik/Input');
@@ -23,7 +22,7 @@ var Select = require('@bigbinary/neetoui/formik/Select');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var ramda = require('ramda');
-var constants = require('../constants-CmhmtttG.js');
+var constants = require('../constants-CVJk8LWV.js');
 var reactQuery = require('@tanstack/react-query');
 var constants$1 = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -32,13 +31,14 @@ var i18next = require('i18next');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var yup = require('yup');
 var formik = require('formik');
-var Delete = require('@bigbinary/neeto-icons/Delete');
+var Edit = require('@bigbinary/neeto-icons/Edit');
 var Avatar = require('@bigbinary/neetoui/Avatar');
 var jsxRuntime = require('react/jsx-runtime');
 var injectCss = require('../inject-css-vQvjPR2x.js');
 var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 var zustand = require('zustand');
 var shallow = require('zustand/shallow');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -102,7 +102,6 @@ var PROFILE_VALIDATION_SCHEMA = yup__namespace.object().shape({
 });
 var MY_PROFILE_PATH = "/auth/profile/edit";
 var ALLOWED_PROFILE_IMAGE_MIME_TYPES = ["image/jpeg", "image/png"];
-var IMAGE_DELETE_BUTTON_SIZE = 16;
 var STATIC_PROFILE_IMAGE_MAX_SIZE_IN_BYTES = initializers.globalProps.endUserUploadedFileSizeLimitInMb * 1024 * 1024;
 var VALIDATION_ERRORS = {
   invalid_type: i18next.t("neetoTeamMembers.profile.file.invalidType.image"),
@@ -157,9 +156,12 @@ var useCountries = function useCountries() {
   };
 };
 
+var Menu$1 = Dropdown.Menu,
+  MenuItem$1 = Dropdown.MenuItem;
 var ProfileImage = function ProfileImage() {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var fileInputRef = require$$0.useRef(null);
   var _useField = formik.useField("avatar"),
     _useField2 = _slicedToArray(_useField, 3),
     field = _useField2[0];
@@ -181,6 +183,10 @@ var ProfileImage = function ProfileImage() {
       file: imageFile
     });
   };
+  var handleChangeImage = function handleChangeImage() {
+    var _fileInputRef$current;
+    return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+  };
   var handleRemoveImage = function handleRemoveImage() {
     return setValue({
       imageUrl: "",
@@ -200,17 +206,30 @@ var ProfileImage = function ProfileImage() {
     return null;
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "mb-8 flex flex-row justify-start",
+    className: "mb-4 flex flex-col items-center gap-2",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0",
-      children: [neetoCist.isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "relative z-10",
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full absolute right-0 top-0 cursor-pointer p-0.5",
-          "data-cy": "profile-image-remove-button",
-          onClick: handleRemoveImage,
-          children: /*#__PURE__*/jsxRuntime.jsx(Delete, {
-            size: IMAGE_DELETE_BUTTON_SIZE
+      className: "relative flex-shrink-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "absolute bottom-0 right-0 z-10",
+        children: /*#__PURE__*/jsxRuntime.jsx(Dropdown
+        // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
+        , {
+          buttonProps: {
+            className: "rounded-full"
+          },
+          buttonSize: "small",
+          buttonStyle: "tertiary",
+          icon: Edit,
+          children: /*#__PURE__*/jsxRuntime.jsxs(Menu$1, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(MenuItem$1.Button, {
+              "data-cy": "profile-image-upload-button",
+              onClick: handleChangeImage,
+              children: avatarDetails !== null && avatarDetails !== void 0 && avatarDetails.imageUrl ? t("neetoTeamMembers.profile.avatar.changeProfilePicture") : t("neetoTeamMembers.profile.avatar.uploadProfilePicture")
+            }), /*#__PURE__*/jsxRuntime.jsx(MenuItem$1.Button, {
+              "data-cy": "profile-image-remove-button",
+              onClick: handleRemoveImage,
+              children: t("neetoTeamMembers.buttons.remove")
+            })]
           })
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Avatar, {
@@ -218,40 +237,26 @@ var ProfileImage = function ProfileImage() {
         user: avatarDetails
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "ml-4 flex flex-col",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-        className: "neeto-ui-text-black mb-1 font-medium",
-        children: t("neetoTeamMembers.profile.avatar.profilePicture")
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "neeto-ui-text-gray-700 mb-2",
+      className: "flex flex-col items-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-text-gray-600 text-center",
         style: "body3",
         children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-          components: {
-            code: /*#__PURE__*/jsxRuntime.jsx("code", {})
-          },
           i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
           values: {
             limit: initializers.globalProps.endUserUploadedFileSizeLimitInMb
           }
         })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "neeto-ui-file-upload flex flex-row ",
-        "data-cy": "profile-image-upload-container",
-        children: [/*#__PURE__*/jsxRuntime.jsx("label", {
-          className: "neeto-ui-btn--style-secondary neeto-ui-btn m-0 mr-3 ",
-          "data-cy": "profile-image-upload-label",
-          htmlFor: "uploadProfileImage",
-          children: avatarDetails !== null && avatarDetails !== void 0 && avatarDetails.imageUrl ? t("neetoTeamMembers.profile.avatar.changeProfilePicture") : t("neetoTeamMembers.profile.avatar.uploadProfilePicture")
-        }), /*#__PURE__*/jsxRuntime.jsx("input", {
-          hidden: true,
-          accept: "image/*",
-          "data-cy": "profile-image-upload-file-field",
-          id: "uploadProfileImage",
-          name: "profile_image_path",
-          type: "file",
-          onChange: onProfileImageChange
-        }, avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl)]
-      })]
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        hidden: true,
+        accept: "image/*",
+        "data-cy": "profile-image-upload-file-field",
+        id: "uploadProfileImage",
+        name: "profile_image_path",
+        ref: fileInputRef,
+        type: "file",
+        onChange: onProfileImageChange
+      }, avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl)]
     })]
   });
 };
@@ -427,16 +432,15 @@ var ChangeProfile = function ChangeProfile(_ref) {
     },
     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.Body, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
           className: "w-full",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "w-full space-y-6 pb-6",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "w-full pb-6",
             children: [/*#__PURE__*/jsxRuntime.jsx(ProfileImage, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "grid grid-cols-2 gap-4",
+              className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
               children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
                 autoFocus: true,
                 required: true,
@@ -455,92 +459,67 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 type: "text",
                 placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
               })]
-            }), /*#__PURE__*/jsxRuntime.jsx(Select, {
-              required: true,
-              "data-cy": "ntm-profile-country-select",
-              label: t("neetoTeamMembers.profile.inputs.label.selectCountry"),
-              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.jsxs("div", {
-              className: "space-y-2",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-                  required: true,
-                  className: "mb-2",
-                  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, {
-                children: errors.timeZone
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx(Select, {
-              required: true,
-              "data-cy": "ntm-time-format-select",
-              name: "timeFormat",
-              options: constants.TIME_FORMAT_OPTIONS,
-              label: t("neetoTeamMembers.profile.inputs.label.selectTimeFormat"),
-              onChange: function onChange(option) {
-                setFieldValue("timeFormat", option.value);
-              }
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+              className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
+              children: [/*#__PURE__*/jsxRuntime.jsx(Select, {
                 required: true,
-                children: t("neetoTeamMembers.profile.inputs.label.dateFormat")
-              }), /*#__PURE__*/jsxRuntime.jsx(Radio, {
-                className: "mt-2 space-x-4",
-                children: constants.DATE_FORMAT_OPTIONS.map(function (_ref6) {
-                  var label = _ref6.label,
-                    value = _ref6.value;
-                  return /*#__PURE__*/require$$0.createElement(Radio.Item, {
-                    label: label,
-                    value: value,
-                    checked: values.dateFormat === value,
-                    "data-cy": "ntm-profile-date-format-radio",
-                    key: value,
-                    name: "dateFormat",
-                    onChange: function onChange(event) {
-                      return setFieldValue("dateFormat", event.target.value);
+                "data-cy": "ntm-profile-country-select",
+                name: "countryId",
+                options: countryDropdownOptions,
+                value: selectedCountryOption,
+                label: t("neetoTeamMembers.profile.inputs.label.selectCountry"),
+                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.jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "space-y-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+                    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, {
+                  className: "neeto-ui-text-error-800",
+                  lineHeight: "none",
+                  style: "body3",
+                  children: errors.timeZone
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+                required: true,
+                "data-cy": "ntm-time-format-select",
+                name: "timeFormat",
+                options: constants.TIME_FORMAT_OPTIONS,
+                label: t("neetoTeamMembers.profile.inputs.label.selectTimeFormat"),
+                onChange: function onChange(option) {
+                  setFieldValue("timeFormat", option.value);
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "space-y-2",
+                children: /*#__PURE__*/jsxRuntime.jsx(Select, {
+                  required: true,
+                  "data-cy": "ntm-date-format-select",
+                  name: "dateFormat",
+                  options: constants.DATE_FORMAT_OPTIONS,
+                  label: t("neetoTeamMembers.profile.inputs.label.dateFormat"),
+                  onChange: function onChange(option) {
+                    setFieldValue("dateFormat", option.value);
+                  }
                 })
               })]
             })]
-          }), /*#__PURE__*/jsxRuntime.jsx("hr", {
-            className: "neeto-ui-border-gray-200 w-full"
-          }), /*#__PURE__*/jsxRuntime.jsx(Callout, {
-            className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 mt-8 w-full",
-            children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-              style: "body2",
-              weight: "light",
-              children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-                i18nKey: "neetoTeamMembers.profile.common.toUpdateProfile",
-                components: {
-                  button: /*#__PURE__*/jsxRuntime.jsx(Button, {
-                    className: "neeto-ui-font-size-inherit",
-                    "data-cy": "ntm-visit-auth-button",
-                    "data-test-id": "ntm-visit-auth-button",
-                    href: MY_PROFILE_PATH,
-                    style: "link",
-                    target: "_blank"
-                  })
-                }
-              })
-            })
-          })]
+          })
         }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
           children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock, {
             isSubmitting: isUpdatingProfile || isUploading,
@@ -587,30 +566,229 @@ var useProfileUpdatePaneState = function useProfileUpdatePaneState() {
   }, shallow.shallow);
 };
 
+var Preview = function Preview() {
+  var _findBy, _findBy2, _globalProps$user;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = require$$0.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+  var _useFetchProfile = useFetchProfile(),
+    _useFetchProfile$data = _useFetchProfile.data,
+    _useFetchProfile$data2 = _useFetchProfile$data === void 0 ? {} : _useFetchProfile$data,
+    _useFetchProfile$data3 = _useFetchProfile$data2.user,
+    user = _useFetchProfile$data3 === void 0 ? {} : _useFetchProfile$data3,
+    isFetchingUserDetails = _useFetchProfile.isFetching;
+  var _user$firstName = user.firstName,
+    firstName = _user$firstName === void 0 ? "" : _user$firstName,
+    _user$lastName = user.lastName,
+    lastName = _user$lastName === void 0 ? "" : _user$lastName,
+    _user$email = user.email,
+    email = _user$email === void 0 ? "" : _user$email,
+    _user$dateFormat = user.dateFormat,
+    dateFormat = _user$dateFormat === void 0 ? user.dateFormat || constants.DATE_FORMAT_OPTIONS[0].value : _user$dateFormat,
+    _user$timeZone = user.timeZone,
+    timeZone = _user$timeZone === void 0 ? "" : _user$timeZone,
+    _user$profileImageUrl = user.profileImageUrl,
+    profileImageUrl = _user$profileImageUrl === void 0 ? "" : _user$profileImageUrl,
+    _user$countryName = user.countryName,
+    countryName = _user$countryName === void 0 ? "" : _user$countryName,
+    _user$timeFormat = user.timeFormat,
+    timeFormat = _user$timeFormat === void 0 ? user.timeFormat || constants.TIME_FORMAT_OPTIONS[0].value : _user$timeFormat;
+  var name = "".concat(firstName, " ").concat(lastName).trim();
+  require$$0.useEffect(function () {
+    var updateTime = function updateTime() {
+      var now = new Date();
+      var options = {
+        timeZone: timeZone,
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: timeFormat === "12h" || true
+      };
+      var formattedTime = new Intl.DateTimeFormat("en-US", options).format(now);
+      setTime(formattedTime);
+    };
+    var interval = setInterval(updateTime, 1000);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [timeZone]);
+  if (!time || isFetchingUserDetails) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+    className: "w-full",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "w-full",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-4 flex flex-col items-center justify-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
+          className: "mb-1",
+          size: "extraLarge",
+          user: {
+            name: name,
+            imageUrl: profileImageUrl
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "h3",
+          weight: "semibold",
+          children: name
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: email
+          }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
+            size: "small",
+            style: "text",
+            value: email
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.firstName")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: firstName
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.lastName")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: lastName
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.country")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: countryName || "-"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.timeZone")
+          }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: [neetoTimeZones.ianaTimezoneToHumanReadable(timeZone), " - ", time]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.preferredTimeFormat")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: ((_findBy = neetoCist.findBy({
+              value: timeFormat
+            }, constants.TIME_FORMAT_OPTIONS)) === null || _findBy === void 0 ? void 0 : _findBy.label) || "-"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.preferredDateFormat")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: ((_findBy2 = neetoCist.findBy({
+              value: dateFormat
+            }, constants.DATE_FORMAT_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+            children: t("neetoTeamMembers.labels.billingAndSubscriptions")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-700",
+            style: "body2",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoTeamMembers.common.subscriptionType",
+              values: {
+                subscription: neetoCist.capitalize((_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.subscriptionPlan)
+              }
+            })
+          })]
+        })
+      })]
+    })
+  });
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
 var Profile = function Profile() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useProfileUpdatePane = useProfileUpdatePaneState(),
     _useProfileUpdatePane2 = _slicedToArray(_useProfileUpdatePane, 2),
     isOpen = _useProfileUpdatePane2[0],
     setIsOpen = _useProfileUpdatePane2[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+  var _useState = require$$0.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditMode = _useState2[0],
+    setIsEditMode = _useState2[1];
   var onClose = function onClose() {
-    return setIsOpen(false);
+    setIsOpen(false);
+    setIsEditMode(false);
+  };
+  var enableEditMode = function enableEditMode() {
+    return setIsEditMode(true);
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "w-full",
     children: /*#__PURE__*/jsxRuntime.jsxs(Pane, {
       isOpen: isOpen,
       onClose: onClose,
+      className: "max-w-96",
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          style: "h2",
-          weight: "semibold",
-          children: t("neetoTeamMembers.profile.common.myProfile")
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex justify-between",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            style: "h2",
+            weight: "semibold",
+            children: t("neetoTeamMembers.profile.common.myProfile")
+          }), !isEditMode && /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
+            buttonSize: "small",
+            buttonStyle: "secondary",
+            icon: MenuHorizontal,
+            children: /*#__PURE__*/jsxRuntime.jsxs(Menu, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                onClick: enableEditMode,
+                children: t("neetoTeamMembers.buttons.editBasicInfo")
+              }), /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                href: MY_PROFILE_PATH,
+                children: t("neetoTeamMembers.buttons.updateEmail")
+              }), /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                href: MY_PROFILE_PATH,
+                children: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions")
+              })]
+            })
+          })]
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(ChangeProfile, {
+      }), isEditMode ? /*#__PURE__*/jsxRuntime.jsx(ChangeProfile, {
         onClose: onClose
-      })]
+      }) : /*#__PURE__*/jsxRuntime.jsx(Preview, {})]
     })
   });
 };