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

package/dist/Profile.js

@@ -1,4 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Pane from '@bigbinary/neetoui/Pane';
 import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation, Trans } from 'react-i18next';
@@ -6,14 +9,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import { useProfileImageUpload } from '@bigbinary/neeto-image-uploader-frontend/hooks';
-import { NeetoTimezoneSelector } from '@bigbinary/neeto-time-zones';
-import { findById, isPresent, findBy, noop } from '@bigbinary/neeto-cist';
-import Button from '@bigbinary/neetoui/Button';
-import Callout from '@bigbinary/neetoui/Callout';
+import { NeetoTimezoneSelector, ianaTimezoneToHumanReadable } from '@bigbinary/neeto-time-zones';
+import { findById, findBy, noop, capitalize } from '@bigbinary/neeto-cist';
 import Label from '@bigbinary/neetoui/Label';
-import Radio from '@bigbinary/neetoui/Radio';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Toastr from '@bigbinary/neetoui/Toastr';
 import Input from '@bigbinary/neetoui/formik/Input';
@@ -21,7 +20,7 @@ import Select from '@bigbinary/neetoui/formik/Select';
 import Form from '@bigbinary/neetoui/formik/Form';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { isNotNil } from 'ramda';
-import { B as BASE_URL, Q as QUERY_KEYS, T as TIME_FORMAT_OPTIONS, D as DATE_FORMAT_OPTIONS } from './constants-BYGIelYc.js';
+import { B as BASE_URL, Q as QUERY_KEYS, T as TIME_FORMAT_OPTIONS, D as DATE_FORMAT_OPTIONS } from './constants-BdTiHt55.js';
 import { useQuery } from '@tanstack/react-query';
 import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
@@ -30,13 +29,14 @@ import { t } from 'i18next';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import * as yup from 'yup';
 import { useField } from 'formik';
-import Delete from '@bigbinary/neeto-icons/Delete';
+import Edit from '@bigbinary/neeto-icons/Edit';
 import Avatar from '@bigbinary/neetoui/Avatar';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { n } from './inject-css-DmrvuTKK.js';
 import withImmutableActions from '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import { create } from 'zustand';
 import { shallow } from 'zustand/shallow';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 
 var fetchCountries = function fetchCountries() {
   return axios.get("".concat(BASE_URL, "/profile/countries"));
@@ -81,7 +81,6 @@ var PROFILE_VALIDATION_SCHEMA = yup.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 = globalProps.endUserUploadedFileSizeLimitInMb * 1024 * 1024;
 var VALIDATION_ERRORS = {
   invalid_type: t("neetoTeamMembers.profile.file.invalidType.image"),
@@ -136,9 +135,12 @@ var useCountries = function useCountries() {
   };
 };
 
+var Menu$1 = Dropdown.Menu,
+  MenuItem$1 = Dropdown.MenuItem;
 var ProfileImage = function ProfileImage() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var fileInputRef = useRef(null);
   var _useField = useField("avatar"),
     _useField2 = _slicedToArray(_useField, 3),
     field = _useField2[0];
@@ -160,6 +162,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: "",
@@ -179,17 +185,30 @@ var ProfileImage = function ProfileImage() {
     return null;
   };
   return /*#__PURE__*/jsxs("div", {
-    className: "mb-8 flex flex-row justify-start",
+    className: "mb-4 flex flex-col items-center gap-2",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex-shrink-0",
-      children: [isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/jsx("div", {
-        className: "relative z-10",
-        children: /*#__PURE__*/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__*/jsx(Delete, {
-            size: IMAGE_DELETE_BUTTON_SIZE
+      className: "relative flex-shrink-0",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "absolute bottom-0 right-0 z-10",
+        children: /*#__PURE__*/jsx(Dropdown
+        // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
+        , {
+          buttonProps: {
+            className: "rounded-full"
+          },
+          buttonSize: "small",
+          buttonStyle: "tertiary",
+          icon: Edit,
+          children: /*#__PURE__*/jsxs(Menu$1, {
+            children: [/*#__PURE__*/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__*/jsx(MenuItem$1.Button, {
+              "data-cy": "profile-image-remove-button",
+              onClick: handleRemoveImage,
+              children: t("neetoTeamMembers.buttons.remove")
+            })]
           })
         })
       }), /*#__PURE__*/jsx(Avatar, {
@@ -197,40 +216,26 @@ var ProfileImage = function ProfileImage() {
         user: avatarDetails
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: "ml-4 flex flex-col",
-      children: [/*#__PURE__*/jsx(Label, {
-        className: "neeto-ui-text-black mb-1 font-medium",
-        children: t("neetoTeamMembers.profile.avatar.profilePicture")
-      }), /*#__PURE__*/jsx(Typography, {
-        className: "neeto-ui-text-gray-700 mb-2",
+      className: "flex flex-col items-center",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-600 text-center",
         style: "body3",
         children: /*#__PURE__*/jsx(Trans, {
-          components: {
-            code: /*#__PURE__*/jsx("code", {})
-          },
           i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
           values: {
             limit: globalProps.endUserUploadedFileSizeLimitInMb
           }
         })
-      }), /*#__PURE__*/jsxs("div", {
-        className: "neeto-ui-file-upload flex flex-row ",
-        "data-cy": "profile-image-upload-container",
-        children: [/*#__PURE__*/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__*/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__*/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)]
     })]
   });
 };
@@ -406,16 +411,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__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsxs(Pane.Body, {
+        children: [/*#__PURE__*/jsx(Pane.Body, {
           className: "w-full",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "w-full space-y-6 pb-6",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "w-full pb-6",
             children: [/*#__PURE__*/jsx(ProfileImage, {}), /*#__PURE__*/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__*/jsx(Input, {
                 autoFocus: true,
                 required: true,
@@ -434,92 +438,67 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 type: "text",
                 placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
               })]
-            }), /*#__PURE__*/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__*/jsxs("div", {
-              className: "space-y-2",
-              children: [/*#__PURE__*/jsxs("div", {
-                children: [/*#__PURE__*/jsx(Label, {
-                  required: true,
-                  className: "mb-2",
-                  children: t("neetoTeamMembers.profile.inputs.label.selectTimeZone")
-                }), /*#__PURE__*/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__*/jsx(Typography, {
-                children: errors.timeZone
-              })]
-            }), /*#__PURE__*/jsx(Select, {
-              required: true,
-              "data-cy": "ntm-time-format-select",
-              name: "timeFormat",
-              options: TIME_FORMAT_OPTIONS,
-              label: t("neetoTeamMembers.profile.inputs.label.selectTimeFormat"),
-              onChange: function onChange(option) {
-                setFieldValue("timeFormat", option.value);
-              }
             }), /*#__PURE__*/jsxs("div", {
-              children: [/*#__PURE__*/jsx(Label, {
+              className: "neeto-ui-border-gray-200 mt-4 w-full space-y-4 border-t pt-4",
+              children: [/*#__PURE__*/jsx(Select, {
                 required: true,
-                children: t("neetoTeamMembers.profile.inputs.label.dateFormat")
-              }), /*#__PURE__*/jsx(Radio, {
-                className: "mt-2 space-x-4",
-                children: DATE_FORMAT_OPTIONS.map(function (_ref6) {
-                  var label = _ref6.label,
-                    value = _ref6.value;
-                  return /*#__PURE__*/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__*/jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "space-y-2",
+                  children: [/*#__PURE__*/jsx(Label, {
+                    required: true,
+                    children: t("neetoTeamMembers.profile.inputs.label.selectTimeZone")
+                  }), /*#__PURE__*/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__*/jsx(Typography, {
+                  className: "neeto-ui-text-error-800",
+                  lineHeight: "none",
+                  style: "body3",
+                  children: errors.timeZone
+                })]
+              }), /*#__PURE__*/jsx(Select, {
+                required: true,
+                "data-cy": "ntm-time-format-select",
+                name: "timeFormat",
+                options: TIME_FORMAT_OPTIONS,
+                label: t("neetoTeamMembers.profile.inputs.label.selectTimeFormat"),
+                onChange: function onChange(option) {
+                  setFieldValue("timeFormat", option.value);
+                }
+              }), /*#__PURE__*/jsx("div", {
+                className: "space-y-2",
+                children: /*#__PURE__*/jsx(Select, {
+                  required: true,
+                  "data-cy": "ntm-date-format-select",
+                  name: "dateFormat",
+                  options: DATE_FORMAT_OPTIONS,
+                  label: t("neetoTeamMembers.profile.inputs.label.dateFormat"),
+                  onChange: function onChange(option) {
+                    setFieldValue("dateFormat", option.value);
+                  }
                 })
               })]
             })]
-          }), /*#__PURE__*/jsx("hr", {
-            className: "neeto-ui-border-gray-200 w-full"
-          }), /*#__PURE__*/jsx(Callout, {
-            className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 mt-8 w-full",
-            children: /*#__PURE__*/jsx(Typography, {
-              style: "body2",
-              weight: "light",
-              children: /*#__PURE__*/jsx(Trans, {
-                i18nKey: "neetoTeamMembers.profile.common.toUpdateProfile",
-                components: {
-                  button: /*#__PURE__*/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__*/jsx(Pane.Footer, {
           children: /*#__PURE__*/jsx(ActionBlock, {
             isSubmitting: isUpdatingProfile || isUploading,
@@ -566,30 +545,229 @@ var useProfileUpdatePaneState = function useProfileUpdatePaneState() {
   }, shallow);
 };
 
+var Preview = function Preview() {
+  var _findBy, _findBy2, _globalProps$user;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = 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 || 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 || TIME_FORMAT_OPTIONS[0].value : _user$timeFormat;
+  var name = "".concat(firstName, " ").concat(lastName).trim();
+  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__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsx(Pane.Body, {
+    className: "w-full",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "w-full",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "mb-4 flex flex-col items-center justify-center",
+        children: [/*#__PURE__*/jsx(Avatar, {
+          className: "mb-1",
+          size: "extraLarge",
+          user: {
+            name: name,
+            imageUrl: profileImageUrl
+          }
+        }), /*#__PURE__*/jsx(Typography, {
+          style: "h3",
+          weight: "semibold",
+          children: name
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-1",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: email
+          }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+            size: "small",
+            style: "text",
+            value: email
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.firstName")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: firstName
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.lastName")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: lastName
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.country")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: countryName || "-"
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.timeZone")
+          }), /*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: [ianaTimezoneToHumanReadable(timeZone), " - ", time]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.preferredTimeFormat")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: ((_findBy = findBy({
+              value: timeFormat
+            }, TIME_FORMAT_OPTIONS)) === null || _findBy === void 0 ? void 0 : _findBy.label) || "-"
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.preferredDateFormat")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: ((_findBy2 = findBy({
+              value: dateFormat
+            }, DATE_FORMAT_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
+          })]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-border-gray-200 space-y-4 border-t py-4",
+        children: /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsx(Label, {
+            children: t("neetoTeamMembers.labels.billingAndSubscriptions")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-700",
+            style: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoTeamMembers.common.subscriptionType",
+              values: {
+                subscription: capitalize((_globalProps$user = 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 = useTranslation(),
+    t = _useTranslation.t;
   var _useProfileUpdatePane = useProfileUpdatePaneState(),
     _useProfileUpdatePane2 = _slicedToArray(_useProfileUpdatePane, 2),
     isOpen = _useProfileUpdatePane2[0],
     setIsOpen = _useProfileUpdatePane2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var _useState = 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__*/jsx("div", {
     className: "w-full",
     children: /*#__PURE__*/jsxs(Pane, {
       isOpen: isOpen,
       onClose: onClose,
+      className: "max-w-96",
       children: [/*#__PURE__*/jsx(Pane.Header, {
-        children: /*#__PURE__*/jsx(Typography, {
-          style: "h2",
-          weight: "semibold",
-          children: t("neetoTeamMembers.profile.common.myProfile")
+        children: /*#__PURE__*/jsxs("div", {
+          className: "flex justify-between",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h2",
+            weight: "semibold",
+            children: t("neetoTeamMembers.profile.common.myProfile")
+          }), !isEditMode && /*#__PURE__*/jsx(Dropdown, {
+            buttonSize: "small",
+            buttonStyle: "secondary",
+            icon: MenuHorizontal,
+            children: /*#__PURE__*/jsxs(Menu, {
+              children: [/*#__PURE__*/jsx(MenuItem.Button, {
+                onClick: enableEditMode,
+                children: t("neetoTeamMembers.buttons.editBasicInfo")
+              }), /*#__PURE__*/jsx(MenuItem.Button, {
+                href: MY_PROFILE_PATH,
+                children: t("neetoTeamMembers.buttons.updateEmail")
+              }), /*#__PURE__*/jsx(MenuItem.Button, {
+                href: MY_PROFILE_PATH,
+                children: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions")
+              })]
+            })
+          })]
         })
-      }), /*#__PURE__*/jsx(ChangeProfile, {
+      }), isEditMode ? /*#__PURE__*/jsx(ChangeProfile, {
         onClose: onClose
-      })]
+      }) : /*#__PURE__*/jsx(Preview, {})]
     })
   });
 };