@bigbinary/neeto-team-members-frontend 5.0.31 → 5.0.33

package/dist/cjs/v2/Profile.js

@@ -3,13 +3,14 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var neetoAtoms = require('@bigbinary/neeto-atoms');
-var lucideReact = require('lucide-react');
+var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
 var reactI18next = require('react-i18next');
 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 formik = require('@bigbinary/neeto-atoms/formik');
+var Card = require('@bigbinary/neeto-atoms/primitives/Card');
 var neetoTimeZones = require('@bigbinary/neeto-time-zones');
 var neetoCist = require('@bigbinary/neeto-cist');
 var constants$1 = require('@bigbinary/neeto-commons-frontend/constants');
@@ -23,14 +24,17 @@ require('formik');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var useCountries = require('../../useCountries-CQdvJz0R.js');
+var timezoneSelector = require('../../timezone-selector-C8J9ifSA.js');
 var i18next = require('i18next');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var yup = require('yup');
 var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 var zustand = require('zustand');
 var shallow = require('zustand/shallow');
+var lucideReact = require('lucide-react');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/v2/CopyToClipboardButton');
 require('axios');
+require('../../inject-css-B6qYtOJe.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -53,24 +57,26 @@ function _interopNamespace(e) {
 }
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var MoreDropdown__default = /*#__PURE__*/_interopDefault(MoreDropdown);
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var withImmutableActions__default = /*#__PURE__*/_interopDefault(withImmutableActions);
+var CopyToClipboardButton__default = /*#__PURE__*/_interopDefault(CopyToClipboardButton);
 
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchProfile = function useFetchProfile(options) {
   return reactQuery.useQuery(_objectSpread$1({
     queryKey: [constants.QUERY_KEYS.USER_PROFILE],
-    queryFn: useCountries.profileApi.fetchUserDetails,
+    queryFn: timezoneSelector.profileApi.fetchUserDetails,
     staleTime: constants$1.DEFAULT_STALE_TIME
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
-  return reactUtils.useMutationWithInvalidation(useCountries.profileApi.updateUser, _objectSpread$1(_objectSpread$1({
+  return reactUtils.useMutationWithInvalidation(timezoneSelector.profileApi.updateUser, _objectSpread$1(_objectSpread$1({
     keysToInvalidate: [[constants.QUERY_KEYS.USER_PROFILE]]
   }, options), {}, {
     onSuccess: function onSuccess() {
@@ -146,7 +152,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     language = _user$language === void 0 ? "" : _user$language;
   var isTimezoneFieldDisabled = !isOwner && !timezoneChangeEnabled;
   var setFieldValueRef = React.useRef(null);
-  var _useCountries = useCountries.useCountries(),
+  var _useCountries = timezoneSelector.useCountries(),
     countryDropdownOptions = _useCountries.countryDropdownOptions,
     selectedCountryOption = _useCountries.selectedCountryOption,
     isFetchingCountriesList = _useCountries.isFetchingCountriesList,
@@ -259,6 +265,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(Select.FormikForm, {
+    className: "flex flex-col h-full flex-1 overflow-y-auto",
     formProps: {
       "data-testid": "ntm-profile-form"
     },
@@ -273,12 +280,19 @@ var ChangeProfile = function ChangeProfile(_ref) {
         touched = _ref4.touched;
       setFieldValueRef.current = setFieldValue;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "w-full flex-1 overflow-y-auto p-4",
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "w-full pb-6",
-            children: [/*#__PURE__*/jsxRuntime.jsx(useCountries.ProfileImage, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "mt-4 w-full space-y-4 border-t border-border pt-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Body, {
+          className: "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto p-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+            className: "w-full shrink-0 ring-0",
+            size: "sm",
+            children: /*#__PURE__*/jsxRuntime.jsx(Card.CardContent, {
+              children: /*#__PURE__*/jsxRuntime.jsx(timezoneSelector.ProfileImage, {})
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+            className: "w-full shrink-0 ring-0",
+            size: "sm",
+            children: /*#__PURE__*/jsxRuntime.jsxs(Card.CardContent, {
+              className: "space-y-6",
               children: [/*#__PURE__*/jsxRuntime.jsx(formik.Input, {
                 autoFocus: true,
                 required: true,
@@ -294,51 +308,42 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 name: "lastName",
                 type: "text",
                 placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "mt-4 w-full space-y-4 border-t border-border pt-4",
-              children: [/*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
+              }), /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
                 required: true,
                 "data-testid": "ntm-profile-country-select",
                 label: t("neetoTeamMembers.profile.inputs.label.country"),
                 name: "countryId",
                 options: countryDropdownOptions,
                 value: selectedCountryOption,
-                onChange: function onChange(option) {
+                onChange: function onChange(value) {
+                  var option = neetoCist.findBy({
+                    value: value
+                  }, countryDropdownOptions);
                   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("div", {
-                className: "space-y-2",
-                children: /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
-                  required: true,
-                  "data-testid": "ntm-language-select",
-                  name: "language",
-                  options: constants$1.LANGUAGE_OPTIONS,
-                  label: t("neetoTeamMembers.profile.inputs.label.language"),
-                  onChange: function onChange(option) {
-                    setFieldValue("language", option.value);
-                  }
-                })
+              }), /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
+                required: true,
+                "data-testid": "ntm-language-select",
+                label: t("neetoTeamMembers.profile.inputs.label.language"),
+                name: "language",
+                options: constants$1.LANGUAGE_OPTIONS
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "space-y-2",
-                  children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Label, {
-                    children: [t("neetoTeamMembers.profile.inputs.label.timeZone"), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-destructive",
-                      children: " *"
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    "data-testid": "ntm-profile-time-zone-select",
-                    ref: timezoneRef,
-                    className: neetoAtoms.cn("w-full grow", {
-                      "pointer-events-none bg-muted": isTimezoneFieldDisabled
-                    })
+                children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Label, {
+                  children: [t("neetoTeamMembers.profile.inputs.label.timeZone"), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-destructive",
+                    children: " *"
                   })]
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  "data-testid": "ntm-profile-time-zone-select",
+                  ref: timezoneRef,
+                  className: neetoAtoms.cn("w-full grow", {
+                    "pointer-events-none bg-muted": isTimezoneFieldDisabled
+                  })
                 }), touched.timeZone && errors.timeZone && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-                  className: "text-xs leading-none text-destructive",
+                  className: "text-destructive",
+                  variant: "caption",
                   children: errors.timeZone
                 })]
               }), /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
@@ -346,27 +351,18 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 "data-testid": "ntm-time-format-select",
                 name: "timeFormat",
                 options: constants.TIME_FORMAT_OPTIONS,
-                label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
-                onChange: function onChange(option) {
-                  setFieldValue("timeFormat", option.value);
-                }
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "space-y-2",
-                children: /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
-                  required: true,
-                  "data-testid": "ntm-date-format-select",
-                  name: "dateFormat",
-                  options: constants.DATE_FORMAT_OPTIONS,
-                  label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
-                  onChange: function onChange(option) {
-                    setFieldValue("dateFormat", option.value);
-                  }
-                })
+                label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat")
+              }), /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
+                required: true,
+                "data-testid": "ntm-date-format-select",
+                name: "dateFormat",
+                options: constants.DATE_FORMAT_OPTIONS,
+                label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat")
               })]
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "border-t border-border p-4",
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Footer, {
+          className: "border-t border-border",
           children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock.FormikActionBlock, {
             isSubmitting: isUpdatingProfile || isUploading,
             cancelButtonProps: {
@@ -414,6 +410,24 @@ var sanitizeValue = function sanitizeValue(value, defaultValue) {
   return ramda.isNil(value) || ramda.is(String, value) && ramda.trim(value) === "" ? defaultValue : value;
 };
 
+var Field = function Field(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-1 py-3 first:pt-0 last:pb-0",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      color: "muted",
+      variant: "caption",
+      weight: "medium",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      "data-testid": testId,
+      variant: "body2",
+      children: children
+    })]
+  });
+};
 var Preview = function Preview() {
   var _globalProps$user, _Intl$DateTimeFormat$, _findBy2, _findBy3, _findBy4;
   var _useTranslation = reactI18next.useTranslation(),
@@ -465,12 +479,12 @@ var Preview = function Preview() {
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "w-full flex-1 overflow-y-auto bg-muted/50 p-4",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex w-full flex-col gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-ui-rounded-md bg-background p-3",
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Body, {
+    className: "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto p-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxRuntime.jsx(Card.CardContent, {
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex items-center gap-3",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
@@ -482,16 +496,17 @@ var Preview = function Preview() {
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex flex-col",
             children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-              className: "text-base font-semibold",
               "data-testid": "profile-full-name-field",
+              variant: "h4",
               children: name
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "flex items-center gap-1",
               children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-                className: "text-sm text-muted-foreground",
+                color: "muted",
                 "data-testid": "profile-email-field",
+                variant: "body3",
                 children: email
-              }), /*#__PURE__*/jsxRuntime.jsx(useCountries.CopyToClipboardButton, {
+              }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default.default, {
                 size: "icon-xs",
                 value: email,
                 variant: "ghost"
@@ -499,102 +514,69 @@ var Preview = function Preview() {
             })]
           })]
         })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "divide-y divide-border neeto-ui-rounded-md bg-background p-3",
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxRuntime.jsxs(Card.CardContent, {
+        className: "divide-y divide-border",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.firstName"),
+          testId: "profile-first-name-field",
+          children: firstName
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.lastName"),
+          testId: "profile-last-name-field",
+          children: lastName
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.country"),
+          testId: "profile-country-field",
+          children: countryName
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.language"),
+          testId: "profile-preferred-language-field",
+          children: ((_findBy2 = neetoCist._findBy({
+            value: language
+          }, constants$1.LANGUAGE_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
+        }), /*#__PURE__*/jsxRuntime.jsxs(Field, {
+          label: t("neetoTeamMembers.labels.timeZone"),
+          testId: "profile-time-zone-field",
+          children: [neetoTimeZones.ianaTimezoneToHumanReadable(timeZone), timeZoneAbbreviation ? " (".concat(timeZoneAbbreviation, ")") : "", " ", time]
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.preferredTimeFormat"),
+          testId: "profile-preferred-time-format-field",
+          children: ((_findBy3 = neetoCist._findBy({
+            value: timeFormat
+          }, constants.TIME_FORMAT_OPTIONS)) === null || _findBy3 === void 0 ? void 0 : _findBy3.label) || "-"
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, {
+          label: t("neetoTeamMembers.labels.preferredDateFormat"),
+          testId: "profile-preferred-date-format-field",
+          children: ((_findBy4 = neetoCist._findBy({
+            value: dateFormat
+          }, constants.DATE_FORMAT_OPTIONS)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label) || "-"
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxRuntime.jsxs(Card.CardContent, {
+        className: "grid grid-cols-[1fr_auto] items-center gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 pb-3",
+          className: "flex flex-col gap-1",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.firstName")
+            color: "muted",
+            variant: "caption",
+            weight: "medium",
+            children: t("neetoTeamMembers.labels.currentPlan")
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-first-name-field",
-            children: firstName
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.lastName")
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-last-name-field",
-            children: lastName
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.country")
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-country-field",
-            children: countryName
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.language")
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-language-field",
-            children: ((_findBy2 = neetoCist._findBy({
-              value: language
-            }, constants$1.LANGUAGE_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.timeZone")
-          }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-time-zone-field",
-            children: [neetoTimeZones.ianaTimezoneToHumanReadable(timeZone), timeZoneAbbreviation ? " (".concat(timeZoneAbbreviation, ")") : "", " ", time]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.preferredTimeFormat")
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-time-format-field",
-            children: ((_findBy3 = neetoCist._findBy({
-              value: timeFormat
-            }, constants.TIME_FORMAT_OPTIONS)) === null || _findBy3 === void 0 ? void 0 : _findBy3.label) || "-"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-1 pt-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.preferredDateFormat")
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-date-format-field",
-            children: ((_findBy4 = neetoCist._findBy({
-              value: dateFormat
-            }, constants.DATE_FORMAT_OPTIONS)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label) || "-"
+            "data-testid": "profile-subscription-type",
+            variant: "body2",
+            children: t("neetoTeamMembers.common.subscriptionType", {
+              subscription: subscription
+            })
           })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-ui-rounded-md bg-background p-3",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center justify-between",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-1",
-            children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-              className: "text-xs font-medium text-muted-foreground",
-              children: t("neetoTeamMembers.labels.currentPlan")
-            }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-              className: "text-[15px] text-foreground",
-              "data-testid": "profile-subscription-type",
-              children: t("neetoTeamMembers.common.subscriptionType", {
-                subscription: subscription
-              })
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        }), /*#__PURE__*/jsxRuntime.jsx(Card.CardAction, {
+          children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             asChild: true,
             "data-testid": "profile-upgrade-button",
             size: "sm",
@@ -604,10 +586,10 @@ var Preview = function Preview() {
                 className: "size-4"
               }), t("neetoTeamMembers.buttons.upgrade")]
             })
-          })]
-        })
-      })]
-    })
+          })
+        })]
+      })
+    })]
   });
 };
 var Preview$1 = /*#__PURE__*/React.memo(Preview);
@@ -630,47 +612,52 @@ var Profile = function Profile() {
   var enableEditMode = function enableEditMode() {
     return setIsEditMode(true);
   };
+  var menuItems = [{
+    key: "edit-basic-info",
+    "data-testid": "edit-basic-info-menu-button",
+    label: t("neetoTeamMembers.buttons.editBasicInfo"),
+    onClick: enableEditMode
+  }, {
+    key: "update-email",
+    "data-testid": "update-email-menu-button",
+    label: t("neetoTeamMembers.buttons.updateEmail"),
+    onClick: function onClick() {
+      return window.open(MY_PROFILE_PATH, "_self");
+    }
+  }, {
+    key: "manage-billing-subscriptions",
+    "data-testid": "manage-billing-subscriptions-menu-button",
+    label: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions"),
+    onClick: function onClick() {
+      return window.open(MY_PROFILE_PATH, "_self");
+    }
+  }];
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "w-full",
     children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet, {
       isOpen: isOpen,
       onClose: onClose,
-      className: "max-w-96 bg-muted/50",
-      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
-        className: "bg-muted/50",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex justify-between",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
-            className: "text-xl font-semibold",
+      className: "ntm-timezone-shadcn-overrides max-w-96 gap-0 bg-sidebar",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Header, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+          asChild: true,
+          children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            variant: "h3",
             children: t("neetoTeamMembers.profile.common.myProfile")
-          }), !isEditMode && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
-            buttonSize: "small",
-            buttonStyle: "text",
-            icon: lucideReact.EllipsisVertical,
+          })
+        }), !isEditMode && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default.default, {
+          menuItems: menuItems,
+          isVertical: true,
+          dropdownProps: {
             position: "bottom-end",
-            children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.DropdownMenu.Menu, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem.Button, {
-                  "data-testid": "edit-basic-info-menu-button",
-                  onClick: enableEditMode,
-                  children: t("neetoTeamMembers.buttons.editBasicInfo")
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem.Button, {
-                  "data-testid": "update-email-menu-button",
-                  href: MY_PROFILE_PATH,
-                  children: t("neetoTeamMembers.buttons.updateEmail")
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.MenuItem.Button, {
-                  "data-testid": "manage-billing-subscriptions-menu-button",
-                  href: MY_PROFILE_PATH,
-                  children: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions")
-                })
-              })]
-            })
-          })]
-        })
+            strategy: "fixed"
+          },
+          dropdownButtonProps: {
+            "data-testid": "profile-more-dropdown-button",
+            size: "icon-sm",
+            className: "absolute top-3 end-12"
+          }
+        })]
       }), isEditMode ? /*#__PURE__*/jsxRuntime.jsx(ChangeProfile, {
         onClose: onClose
       }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {})]