@bigbinary/neeto-molecules 4.0.132 → 4.0.134

package/dist/FloatingActionMenu.js

@@ -17,7 +17,7 @@ import classnames from 'classnames';
 import Search from '@bigbinary/neeto-icons/Search';
 import Input from '@bigbinary/neetoui/Input';
 import Typography from '@bigbinary/neetoui/Typography';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Neeto from '@bigbinary/neeto-icons/typeface-logos/Neeto';
 import * as AppIcons from '@bigbinary/neeto-icons/typeface-logos';
@@ -27,18 +27,18 @@ import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { t } from 'i18next';
 import Book from '@bigbinary/neeto-icons/Book';
-import Community from '@bigbinary/neeto-icons/Community';
 import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Right from '@bigbinary/neeto-icons/Right';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import ProductSwitcher$1 from '@bigbinary/neeto-icons/ProductSwitcher';
 import useLocalStorage from '@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage';
-import Check from '@bigbinary/neeto-icons/Check';
+import Moon from '@bigbinary/neeto-icons/Moon';
+import Sun from '@bigbinary/neeto-icons/Sun';
 import { getFromLocalStorage } from '@bigbinary/neeto-commons-frontend/utils';
 import { resetAuthTokens } from '@bigbinary/neeto-commons-frontend/utils/axios';
 import { removeFromLocalStorage } from '@bigbinary/neeto-commons-frontend/utils/general';
+import Logout from '@bigbinary/neeto-icons/Logout';
 import './useKeyboardShortcutsPaneState-C_eLceJQ.js';
 import 'zustand/shallow';
 import '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
@@ -337,21 +337,10 @@ var shouldShowWhatsNew = function shouldShowWhatsNew() {
 var MY_ORGANIZATION_URL = "/auth/organization/edit";
 var ENGAGE_WIDGET_TRIGGER_ID = "neetoengage-trigger";
 var DEFAULT_HELP_LINK_PROPS = {
-  communityProps: {
-    label: t("neetoMolecules.sidebar.helpLinks.community", {
-      app: globalProps.appName
-    }),
-    icon: Community,
-    "data-testid": "help-link-community-button",
-    "data-btn-weight": "bold",
-    href: "https://www.launchpass.com/neetohq",
-    target: "_blank"
-  },
   helpCenterProps: {
     label: t("neetoMolecules.sidebar.helpLinks.helpCenter"),
     icon: Book,
     "data-testid": "help-link-help-center-button",
-    "data-btn-weight": "bold",
     href: "https://help.".concat(toLower(globalProps.appName), ".com/"),
     target: "_blank"
   },
@@ -359,7 +348,6 @@ var DEFAULT_HELP_LINK_PROPS = {
     label: t("neetoMolecules.sidebar.helpLinks.liveChat"),
     icon: Help,
     "data-testid": "help-link-live-chat-button",
-    "data-btn-weight": "bold",
     onClick: function onClick() {
       var _window$NeetoChat, _window$NeetoChat2;
       (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 || (_window$NeetoChat = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat === void 0 || _window$NeetoChat.maximizeWidget();
@@ -385,6 +373,14 @@ var DEFAULT_MENU_LINK_PROPS = {
     "data-testid": "help-link-status-button",
     href: "https://neetostatus.com/",
     target: "_blank"
+  },
+  communityProps: {
+    label: t("neetoMolecules.sidebar.helpLinks.community", {
+      app: globalProps.appName
+    }),
+    "data-testid": "help-link-community-button",
+    href: "https://www.launchpass.com/neetohq",
+    target: "_blank"
   }
 };
 var NON_BUTTON_PROPS = ["isVisible"];
@@ -453,10 +449,10 @@ var useFetchLoggedInOrganizations = function useFetchLoggedInOrganizations(email
   });
 };
 
-var MenuItem$4 = Dropdown$1.MenuItem;
+var MenuItem$5 = Dropdown$1.MenuItem;
 var MenuButton$2 = withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/jsx(MenuItem$4.Button, {
+  return /*#__PURE__*/jsx(MenuItem$5.Button, {
     className: "neeto-molecules-menu-sublist__item-btn",
     "data-testid": "organization-switcher-button",
     style: "text",
@@ -469,7 +465,7 @@ var MenuButton$2 = withT(function (_ref) {
 });
 
 var Menu$2 = Dropdown$1.Menu,
-  MenuItem$3 = Dropdown$1.MenuItem;
+  MenuItem$4 = Dropdown$1.MenuItem;
 var OrganizationSwitcher = function OrganizationSwitcher() {
   var _globalProps$user;
   var _useTranslation = useTranslation(),
@@ -488,7 +484,7 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
     return currentSubdomain === linkSubdomain;
   };
   return /*#__PURE__*/jsx(Dropdown$1, {
-    className: "neeto-molecules-theme-switcher-menu-popup-wrapper",
+    className: "neeto-molecules-organization-switcher-menu-popup-wrapper",
     closeOnSelect: false,
     customTarget: /*#__PURE__*/jsx(MenuButton$2, {}),
     interactiveDebounce: 30,
@@ -498,7 +494,7 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
     zIndex: 99999,
     children: /*#__PURE__*/jsxs(Menu$2, {
       children: [organizations === null || organizations === void 0 ? void 0 : organizations.map(function (organization) {
-        return /*#__PURE__*/jsxs(MenuItem$3.Button, {
+        return /*#__PURE__*/jsxs(MenuItem$4.Button, {
           href: organization.organizationUrl,
           rel: "noreferrer",
           style: "text",
@@ -516,7 +512,7 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
             }
           }), organization.orgName]
         }, organization.userId);
-      }), /*#__PURE__*/jsx(MenuItem$3.Button, {
+      }), /*#__PURE__*/jsx(MenuItem$4.Button, {
         href: authAppUrl,
         rel: "noreferrer",
         target: "_blank",
@@ -533,7 +529,7 @@ var MenuButton$1 = function MenuButton(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var MenuItem = Dropdown$1.MenuItem;
-  return /*#__PURE__*/jsxs(MenuItem.Button, _objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsx(MenuItem.Button, _objectSpread$2(_objectSpread$2({
     className: "neeto-molecules-menu-sublist__item-btn",
     "data-testid": "product-switcher-button",
     label: t("neetoMolecules.sidebar.productSwitcher"),
@@ -543,14 +539,12 @@ var MenuButton$1 = function MenuButton(_ref) {
       size: 18
     })
   }, otherProps), {}, {
-    children: [/*#__PURE__*/jsx(ProductSwitcher$1, {
-      size: 20
-    }), t("neetoMolecules.sidebar.productSwitcher")]
+    children: t("neetoMolecules.sidebar.productSwitcher")
   }));
 };
 
 var Menu$1 = Dropdown$1.Menu,
-  MenuItem$2 = Dropdown$1.MenuItem;
+  MenuItem$3 = Dropdown$1.MenuItem;
 var Dropdown = function Dropdown() {
   return /*#__PURE__*/jsx(Dropdown$1, {
     appendTo: "parent",
@@ -566,7 +560,7 @@ var Dropdown = function Dropdown() {
       classNames: "neeto-molecules-product-switcher-menu-popup__dropdown"
     },
     children: /*#__PURE__*/jsx(Menu$1, {
-      children: /*#__PURE__*/jsx(MenuItem$2, {
+      children: /*#__PURE__*/jsx(MenuItem$3, {
         children: /*#__PURE__*/jsx(Menu$3, {})
       })
     })
@@ -589,21 +583,18 @@ var ProfileHeader = function ProfileHeader(_ref) {
   var profileInfo = _ref.profileInfo;
   var name = profileInfo.name,
     email = profileInfo.email;
-  return /*#__PURE__*/jsxs("div", {
-    className: "neeto-ui-relative neeto-ui-flex neeto-ui-items-center neeto-ui-p-3 neeto-ui-bg-primary-50 neeto-molecules-profile-popup__top-section",
+  return /*#__PURE__*/jsxs("span", {
+    className: "flex w-full items-center gap-2 text-start",
     "data-testid": "floating-action-menu-profile-header",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "start-0 top-0",
-      children: /*#__PURE__*/jsx(Avatar, {
-        "data-testid": "floating-action-menu-header-profile-icon",
-        size: "large",
-        user: profileInfo
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 neeto-ui-ps-3",
+    children: [/*#__PURE__*/jsx(Avatar, {
+      "data-testid": "floating-action-menu-header-profile-icon",
+      size: "medium",
+      user: profileInfo
+    }), /*#__PURE__*/jsxs("span", {
+      className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-grow neeto-ui-min-w-0 gap-1",
       children: [/*#__PURE__*/jsx(Typography, {
         className: "neeto-ui-m-0",
-        component: "h2",
+        component: "span",
         "data-testid": "floating-action-menu-header-user-name",
         lineHeight: "tight",
         style: "h5",
@@ -611,7 +602,8 @@ var ProfileHeader = function ProfileHeader(_ref) {
         weight: "semibold",
         children: truncate(name, 18)
       }), email && /*#__PURE__*/jsx(Typography, {
-        className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-700",
+        className: "neeto-ui-w-full neeto-ui-truncate neeto-ui-text-gray-500",
+        component: "span",
         "data-testid": "floating-action-menu-header-user-email",
         lineHeight: "tight",
         style: "body3",
@@ -644,29 +636,10 @@ var getConsumerProfileInfo = function getConsumerProfileInfo() {
     isAuthenticated: globalProps.isConsumer
   };
 };
-var getDefaultTopLinks = function getDefaultTopLinks(isOwner, setIsProfilePaneOpen, isAuthenticated) {
-  if (!isAuthenticated) return [];
-  var topLinks = [{
-    label: t("neetoMolecules.sidebar.myProfile"),
-    onClick: function onClick() {
-      return setIsProfilePaneOpen(true);
-    },
-    "data-testid": "my-profile-button"
-  }];
-  if (isOwner) {
-    topLinks.push({
-      label: t("neetoMolecules.sidebar.myWorkspace"),
-      onClick: function onClick() {
-        return window.open(MY_ORGANIZATION_URL, "_self");
-      },
-      "data-testid": "profile-organization-settings-button"
-    });
-  }
-  return topLinks;
-};
 var getDefaultBottomLinks = function getDefaultBottomLinks(isAuthenticated, isConsumer) {
   return [isAuthenticated ? {
     label: t("neetoMolecules.sidebar.logout"),
+    icon: Logout,
     onClick: function onClick() {
       resetAuthTokens();
       removeFromLocalStorage(getSidebarStateLocalStorageKey());
@@ -701,49 +674,99 @@ var setAppTheme = function setAppTheme() {
   isDarkTheme ? setDarkTheme() : setLightTheme();
 };
 
+var MenuItem$2 = Dropdown$1.MenuItem;
+var ThemeSwitcher = function ThemeSwitcher() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useLocalStorage = useLocalStorage(APP_THEME_LOCALSTORAGE_KEY, THEMES.LIGHT),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    appTheme = _useLocalStorage2[0],
+    setAppTheme = _useLocalStorage2[1];
+  var isDarkThemeSelected = appTheme === THEMES.DARK;
+  var switchTheme = function switchTheme(theme) {
+    theme === THEMES.LIGHT ? setLightTheme() : setDarkTheme();
+    setAppTheme(theme);
+  };
+  return /*#__PURE__*/jsxs(MenuItem$2, {
+    className: "neeto-molecules-theme-switcher flex items-center justify-between gap-2 px-5 py-3",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-theme-switcher__label",
+      children: t("neetoMolecules.sidebar.themeSwitcher.label")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-molecules-theme-switcher__segmented-control",
+      "data-testid": "theme-switcher-button",
+      children: [/*#__PURE__*/jsxs("button", {
+        "data-testid": "theme-switcher-light-button",
+        type: "button",
+        className: classnames("neeto-molecules-theme-switcher__option", {
+          "neeto-molecules-theme-switcher__option--active": !isDarkThemeSelected
+        }),
+        onClick: function onClick() {
+          return switchTheme(THEMES.LIGHT);
+        },
+        children: [/*#__PURE__*/jsx(Sun, {
+          size: 18
+        }), t("neetoMolecules.sidebar.themeSwitcher.light")]
+      }), /*#__PURE__*/jsxs("button", {
+        "data-testid": "theme-switcher-dark-button",
+        type: "button",
+        className: classnames("neeto-molecules-theme-switcher__option", {
+          "neeto-molecules-theme-switcher__option--active": isDarkThemeSelected
+        }),
+        onClick: function onClick() {
+          return switchTheme(THEMES.DARK);
+        },
+        children: [/*#__PURE__*/jsx(Moon, {
+          size: 18
+        }), t("neetoMolecules.sidebar.themeSwitcher.dark")]
+      })]
+    })]
+  });
+};
+
 var MenuItem$1 = Dropdown$1.MenuItem;
 var MenuButton = withT(function (_ref) {
-  var t = _ref.t,
-    selectedThemeName = _ref.selectedThemeName;
+  var _globalProps$organiza;
+  var t = _ref.t;
   return /*#__PURE__*/jsx(MenuItem$1.Button, {
-    className: "neeto-molecules-menu-sublist__item-btn",
-    "data-testid": "theme-switcher-button",
+    className: "neeto-molecules-workspace-display",
+    "data-testid": "workspace-display",
     style: "text",
     suffix: /*#__PURE__*/jsx(Right, {
       className: "rtl:scale-x-[-1]",
       size: 18
     }),
-    children: t("neetoMolecules.sidebar.themeSwitcher.label", {
-      selectedTheme: selectedThemeName
+    children: /*#__PURE__*/jsxs("span", {
+      className: "neeto-molecules-workspace-display__content flex flex-col gap-1.5 text-start",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-molecules-workspace-display__label",
+        component: "span",
+        style: "body2",
+        weight: "medium",
+        children: t("neetoMolecules.sidebar.workspace")
+      }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name) && /*#__PURE__*/jsx(Typography, {
+        className: "neeto-molecules-workspace-display__name neeto-ui-text-gray-500",
+        component: "span",
+        style: "body3",
+        children: globalProps$1.organization.name
+      })]
     })
   });
 });
 
 var Menu = Dropdown$1.Menu,
   MenuItem = Dropdown$1.MenuItem;
-var ThemeSwitcher = function ThemeSwitcher() {
+var WorkspaceMenu = function WorkspaceMenu() {
+  var _globalProps$organiza;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useBreakpoints = useBreakpoints(),
     isSize = _useBreakpoints.isSize;
-  var _useLocalStorage = useLocalStorage(APP_THEME_LOCALSTORAGE_KEY, THEMES.LIGHT),
-    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
-    appTheme = _useLocalStorage2[0],
-    setAppTheme = _useLocalStorage2[1];
-  var isDarkThemeSelected = appTheme === THEMES.DARK;
-  var selectedThemeName = isDarkThemeSelected ? t("neetoMolecules.sidebar.themeSwitcher.dark") : t("neetoMolecules.sidebar.themeSwitcher.light");
   var isMobile = isSize("mobile");
-  var switchTheme = function switchTheme(theme) {
-    theme === THEMES.LIGHT ? setLightTheme() : setDarkTheme();
-    setAppTheme(theme);
-  };
   return /*#__PURE__*/jsx(Dropdown$1, {
-    appendTo: "parent",
-    className: "neeto-molecules-theme-switcher-menu-popup-wrapper",
+    className: "neeto-molecules-organization-menu-popup-wrapper",
     closeOnSelect: false,
-    customTarget: /*#__PURE__*/jsx(MenuButton, {
-      selectedThemeName: selectedThemeName
-    }),
+    customTarget: /*#__PURE__*/jsx(MenuButton, {}),
     interactiveDebounce: 30,
     offset: [0, 5],
     position: isMobile ? "bottom" : "right",
@@ -751,36 +774,37 @@ var ThemeSwitcher = function ThemeSwitcher() {
     zIndex: 99999,
     children: /*#__PURE__*/jsxs(Menu, {
       children: [/*#__PURE__*/jsx(MenuItem.Button, {
-        "data-testid": "theme-switcher-light-button",
-        suffix: !isDarkThemeSelected && /*#__PURE__*/jsx(Check, {
-          size: 18
-        }),
-        className: classnames({
-          "neeto-molecules-theme-switcher-active-button": !isDarkThemeSelected
-        }),
-        onClick: function onClick() {
-          return switchTheme(THEMES.LIGHT);
-        },
-        children: t("neetoMolecules.sidebar.themeSwitcher.light")
-      }), /*#__PURE__*/jsx(MenuItem.Button, {
-        "data-testid": "theme-switcher-dark-button",
-        suffix: isDarkThemeSelected && /*#__PURE__*/jsx(Check, {
-          size: 18
-        }),
-        className: classnames({
-          "neeto-molecules-theme-switcher-active-button": isDarkThemeSelected
-        }),
-        onClick: function onClick() {
-          return switchTheme(THEMES.DARK);
-        },
-        children: t("neetoMolecules.sidebar.themeSwitcher.dark")
+        "data-testid": "profile-organization-settings-button",
+        href: MY_ORGANIZATION_URL,
+        rel: "noreferrer",
+        target: "_blank",
+        children: t("neetoMolecules.sidebar.workspaceMenu.settings")
+      }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.subdomain) && /*#__PURE__*/jsx(MenuItem.Button, {
+        href: MY_ORGANIZATION_URL,
+        rel: "noreferrer",
+        target: "_blank",
+        children: /*#__PURE__*/jsxs("span", {
+          className: "neeto-molecules-workspace-display__content flex flex-col gap-1.5 text-start",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-molecules-workspace-display__label",
+            component: "span",
+            style: "body2",
+            weight: "medium",
+            children: t("neetoMolecules.sidebar.workspaceMenu.subdomain")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-molecules-workspace-display__name neeto-ui-text-gray-500",
+            component: "span",
+            style: "body3",
+            children: globalProps$1.organization.subdomain
+          })]
+        })
       })]
     })
   });
 };
 
 var ProfileMenu = function ProfileMenu(_ref) {
-  var _globalProps$user, _globalProps$user2;
+  var _globalProps$user, _globalProps$user2, _globalProps$user3, _globalProps$user4;
   var profileInfo = _ref.profileInfo,
     showProductSwitcher = _ref.showProductSwitcher,
     helpLinks = _ref.helpLinks,
@@ -796,29 +820,16 @@ var ProfileMenu = function ProfileMenu(_ref) {
     MenuItem = Dropdown$1.MenuItem,
     Divider = Dropdown$1.Divider;
   var isAuthenticated = profileInfo.isAuthenticated;
+  var _Profile$usePaneState = Profile.usePaneState(),
+    _Profile$usePaneState2 = _slicedToArray(_Profile$usePaneState, 2),
+    setIsProfilePaneOpen = _Profile$usePaneState2[1];
+  var normalizedPlan = (((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.subscriptionPlan) || "").toLowerCase();
   return /*#__PURE__*/jsxs(Menu, {
     className: "pb-1",
-    children: [/*#__PURE__*/jsx(MenuItem, {
-      className: "neeto-molecules-profile-popup",
-      "data-testid": "profile-popup",
-      children: isAuthenticated && /*#__PURE__*/jsx(ProfileHeader, {
-        profileInfo: profileInfo
-      })
-    }), !isConsumer && /*#__PURE__*/jsxs(Fragment, {
-      children: [isPresent((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.subscriptionPlan) && /*#__PURE__*/jsx(LinkSection, {
-        links: [{
-          label: /*#__PURE__*/jsx(Trans, {
-            i18nKey: "neetoMolecules.sidebar.currentPlan",
-            values: {
-              subscriptionPlan: humanize((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.subscriptionPlan)
-            }
-          }),
-          href: NEETO_AUTH_BILLING_INFO_URL,
-          "data-testid": "subscription-plan"
-        }]
-      }), showProductSwitcher && /*#__PURE__*/jsx(ProductSwitcher, {
-        toggleModal: toggleModal
-      }), isOrganizationSwitcherEnabled && /*#__PURE__*/jsx(OrganizationSwitcher, {}), isThemeSwitcherEnabled && /*#__PURE__*/jsx(ThemeSwitcher, {}), isNotEmpty(topLinks) && /*#__PURE__*/jsxs(Fragment, {
+    children: [!isConsumer && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(LinkSection, {
+        links: defaultLinks
+      }), isNotEmpty(topLinks) && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(LinkSection, {
           links: topLinks
         })]
@@ -827,13 +838,38 @@ var ProfileMenu = function ProfileMenu(_ref) {
           className: "neeto-molecules-floating-action-button__profile-wrapper-custom-content",
           children: customContent
         })]
-      }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(LinkSection, {
-        links: defaultLinks
-      }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(LinkSection, {
+      }), /*#__PURE__*/jsx(Divider, {}), ((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.isOwner) && /*#__PURE__*/jsx(WorkspaceMenu, {}), isOrganizationSwitcherEnabled && /*#__PURE__*/jsx(OrganizationSwitcher, {}), /*#__PURE__*/jsx(Divider, {}), isPresent((_globalProps$user3 = globalProps.user) === null || _globalProps$user3 === void 0 ? void 0 : _globalProps$user3.subscriptionPlan) && /*#__PURE__*/jsx(LinkSection, {
+        links: [{
+          label: /*#__PURE__*/jsxs(Fragment, {
+            children: [globalProps.appName, " ", /*#__PURE__*/jsx("span", {
+              className: classnames("neeto-molecules-subscription-plan-badge", {
+                "neeto-molecules-subscription-plan-badge--pro": normalizedPlan === "pro",
+                "neeto-molecules-subscription-plan-badge--free": normalizedPlan === "free"
+              }),
+              children: humanize((_globalProps$user4 = globalProps.user) === null || _globalProps$user4 === void 0 ? void 0 : _globalProps$user4.subscriptionPlan)
+            })]
+          }),
+          href: NEETO_AUTH_BILLING_INFO_URL,
+          "data-testid": "subscription-plan"
+        }]
+      }), showProductSwitcher && /*#__PURE__*/jsx(ProductSwitcher, {
+        toggleModal: toggleModal
+      }), /*#__PURE__*/jsx(LinkSection, {
         links: helpLinks
       }), /*#__PURE__*/jsx(Divider, {})]
+    }), isAuthenticated && /*#__PURE__*/jsx(MenuItem.Button, {
+      className: "neeto-molecules-profile-popup",
+      "data-testid": "my-profile-button",
+      onClick: function onClick() {
+        return setIsProfilePaneOpen(true);
+      },
+      children: /*#__PURE__*/jsx(ProfileHeader, {
+        profileInfo: profileInfo
+      })
     }), /*#__PURE__*/jsx(LinkSection, {
       links: bottomLinks
+    }), isThemeSwitcherEnabled && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(ThemeSwitcher, {})]
     })]
   });
 };
@@ -841,7 +877,6 @@ var ProfileMenu = function ProfileMenu(_ref) {
 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(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 ProfileButton = function ProfileButton(_ref) {
-  var _globalProps$user;
   var profileInfoOverrides = _ref.profileInfoOverrides,
     showProductSwitcher = _ref.showProductSwitcher,
     bottomLinks = _ref.bottomLinks,
@@ -855,16 +890,17 @@ var ProfileButton = function ProfileButton(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isModalOpen = _useState2[0],
     setIsModalOpen = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    changesCount = _useState4[0],
-    setChangesCount = _useState4[1];
+    isBackdropVisible = _useState4[0],
+    setIsBackdropVisible = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    changesCount = _useState6[0],
+    setChangesCount = _useState6[1];
   var _KeyboardShortcuts$us = KeyboardShortcuts.usePaneState(),
     _KeyboardShortcuts$us2 = _slicedToArray(_KeyboardShortcuts$us, 2),
     setIsOpen = _KeyboardShortcuts$us2[1];
-  var _Profile$usePaneState = Profile.usePaneState(),
-    _Profile$usePaneState2 = _slicedToArray(_Profile$usePaneState, 2),
-    setIsProfilePaneOpen = _Profile$usePaneState2[1];
   useHotkeys(["ctrl+e", "command+e"], function () {
     return setIsModalOpen(not);
   }, {
@@ -883,7 +919,6 @@ var ProfileButton = function ProfileButton(_ref) {
     };
     window.Nv = window.Nv ? Object.assign(window.Nv, Nv) : Nv;
   }, []);
-  var newTopLinks = globalProps.appName.toLowerCase() !== "neetoauth" ? [].concat(_toConsumableArray(getDefaultTopLinks((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.isOwner, setIsProfilePaneOpen, profileInfo.isAuthenticated)), _toConsumableArray(topLinks)) : topLinks;
   var newBottomLinks = [].concat(_toConsumableArray(getDefaultBottomLinks(profileInfo.isAuthenticated, isConsumer)), _toConsumableArray(bottomLinks));
   var helpLinks = Object.keys(DEFAULT_HELP_LINK_PROPS).map(function (key) {
     return _objectSpread$1({}, DEFAULT_HELP_LINK_PROPS[key]);
@@ -911,6 +946,8 @@ var ProfileButton = function ProfileButton(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Profile.Pane, {
       popoverProps: profilePopoverProps
+    }), isBackdropVisible && /*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-floating-action-button__backdrop"
     }), /*#__PURE__*/jsx(Dropdown$1, {
       appendTo: function appendTo() {
         return document.body;
@@ -919,10 +956,10 @@ var ProfileButton = function ProfileButton(_ref) {
       closeOnSelect: false,
       icon: noop,
       interactiveDebounce: 30,
-      offset: [15, 10],
+      offset: [4, 4],
       position: "right-end",
       strategy: "fixed",
-      theme: "light",
+      theme: "light neeto-molecules-floating-action-outer-dropdown-wrapper",
       trigger: "all",
       zIndex: 99999,
       customTarget: /*#__PURE__*/jsxs("button", {
@@ -943,6 +980,12 @@ var ProfileButton = function ProfileButton(_ref) {
       dropdownProps: {
         classNames: "neeto-molecules-floating-action-button__dropdown"
       },
+      onHide: function onHide() {
+        return setIsBackdropVisible(false);
+      },
+      onShow: function onShow() {
+        return setIsBackdropVisible(true);
+      },
       children: /*#__PURE__*/jsx(ProfileMenu, {
         customContent: customContent,
         defaultLinks: defaultLinks,
@@ -952,9 +995,9 @@ var ProfileButton = function ProfileButton(_ref) {
         isThemeSwitcherEnabled: isThemeSwitcherEnabled,
         profileInfo: profileInfo,
         showProductSwitcher: showProductSwitcher,
+        topLinks: topLinks,
         bottomLinks: newBottomLinks,
-        toggleModal: setIsModalOpen,
-        topLinks: newTopLinks
+        toggleModal: setIsModalOpen
       })
     }), isPresent(changesCount) && /*#__PURE__*/jsx("span", {
       className: "neeto-molecules-menu__notif-count",
@@ -969,7 +1012,7 @@ var ProfileButton = function ProfileButton(_ref) {
   });
 };
 
-var css = ":root{--neeto-molecules-floating-menu-z-index:99999}.neeto-molecules-floating-action-menu__container{background-color:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-white));border-end-end-radius:1.0625rem;border-inline-start:none;border-start-end-radius:1.0625rem;bottom:16px;inset-inline-start:0;position:fixed;z-index:99999;z-index:var(--neeto-molecules-floating-menu-z-index)}.neeto-molecules-floating-action-button{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-color:rgb(var(--neeto-ui-primary-500));border-end-end-radius:1rem;border-start-end-radius:1rem;display:flex;flex-direction:column;gap:.375rem;justify-content:center;padding:.25rem}.neeto-molecules-floating-action-button__help-icon{align-items:center;background-color:#fff;border-radius:6.25rem;display:flex;height:1.625rem;justify-content:center;width:1.625rem}.neeto-molecules-floating-action-button__profile-avatar{--neeto-ui-avatar-container-width:1.625rem;--neeto-ui-avatar-container-height:1.625rem;border:2px solid #fff;border-radius:6.25rem}.neeto-molecules-floating-action-button__profile-avatar>div{height:100%;width:100%}.neeto-molecules-floating-action-button__profile-avatar .neeto-ui-avatar{height:100%!important;width:100%!important}.neeto-molecules-floating-action-button__dropdown{flex-shrink:0;max-height:95vh!important;max-width:none;width:16rem;z-index:99999;z-index:var(--neeto-molecules-floating-menu-z-index)}.neeto-molecules-floating-action-button__dropdown ul{padding-top:0!important}.neeto-molecules-product-switcher-menu-popup__dropdown{max-height:none!important;max-width:none}.neeto-molecules-menu__notif-count{border:1px solid #fff;height:.9375rem;inset-inline-end:0;min-width:.9375rem;pointer-events:none;position:absolute;top:0;z-index:3}.neeto-molecules-menu-list__item-btn-count,.neeto-molecules-menu__notif-count{align-items:center;background-color:rgb(var(--neeto-ui-accent-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:flex;flex-shrink:0;font-size:var(--neeto-ui-text-xxs);justify-content:center;padding-inline-end:.25rem;padding-inline-start:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-menu-list__item-btn-count{height:1.125rem;min-width:1.125rem}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper{border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded)!important;min-width:15rem}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper .tippy-content{padding:0}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper .tippy-svg-arrow{display:none!important}.neeto-molecules-profile-popup__top-section{border-start-end-radius:var(--neeto-ui-rounded);border-start-start-radius:var(--neeto-ui-rounded)}.neeto-molecules-menu-sublist__item-btn{font-weight:500!important;height:2.5rem}.neeto-molecules-menu-sublist__item-btn[data-btn-weight=bold]{font-weight:700!important}.neeto-molecules-menu-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-menu-sublist__item-btn-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-menu-sublist__item-btn span{align-items:center;display:flex;gap:.5rem}.neeto-molecules-product-switcher-menu-popup-wrapper{height:95vh;overflow-y:auto;width:calc(100vw - 25rem)}.neeto-molecules-floating-action-button__profile-wrapper-custom-content:hover{background-color:rgb(var(--neeto-ui-white))!important}.neeto-molecules-theme-switcher-menu-popup-wrapper .neeto-ui-dropdown__popup-menu{padding-top:.25rem!important}.neeto-molecules-organization-switcher-active-button,.neeto-molecules-theme-switcher-active-button{color:rgb(var(--neeto-ui-success-600))!important}";
+var css = ":root{--neeto-molecules-floating-menu-z-index:99999}.neeto-molecules-floating-action-menu__container{background-color:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-white));border-end-end-radius:1.0625rem;border-inline-start:none;border-start-end-radius:1.0625rem;bottom:16px;inset-inline-start:0;position:fixed;z-index:99999;z-index:var(--neeto-molecules-floating-menu-z-index)}.neeto-molecules-floating-action-button{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-color:rgb(var(--neeto-ui-primary-500));border-end-end-radius:1rem;border-start-end-radius:1rem;display:flex;flex-direction:column;gap:.375rem;justify-content:center;padding:.25rem}.neeto-molecules-floating-action-button__help-icon{align-items:center;background-color:#fff;border-radius:6.25rem;display:flex;height:1.625rem;justify-content:center;width:1.625rem}.neeto-molecules-floating-action-button__profile-avatar{--neeto-ui-avatar-container-width:1.625rem;--neeto-ui-avatar-container-height:1.625rem;border:2px solid #fff;border-radius:6.25rem}.neeto-molecules-floating-action-button__profile-avatar>div{height:100%;width:100%}.neeto-molecules-floating-action-button__profile-avatar .neeto-ui-avatar{height:100%!important;width:100%!important}.neeto-molecules-floating-action-button__dropdown{--neeto-ui-dropdown-divider-margin:0.5rem;--neeto-ui-dropdown-item-border-radius:0.25rem;flex-shrink:0;max-height:95vh!important;max-width:none;width:16rem;z-index:99999;z-index:var(--neeto-molecules-floating-menu-z-index)}.neeto-molecules-floating-action-button__dropdown .neeto-ui-dropdown__popup-menu{padding-bottom:.75rem!important;padding-top:.75rem!important}.neeto-molecules-floating-action-button__dropdown.neeto-ui-dropdown__popup .neeto-ui-dropdown__popup-menu-item{background-color:transparent!important;padding-left:.75rem;padding-right:.75rem}.neeto-molecules-floating-action-button__backdrop{background-color:rgba(var(--neeto-ui-black),.27);height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:99998;z-index:calc(var(--neeto-molecules-floating-menu-z-index) - 1)}.neeto-molecules-product-switcher-menu-popup__dropdown{max-height:none!important;max-width:none}.neeto-molecules-menu__notif-count{border:1px solid #fff;height:.9375rem;inset-inline-end:0;min-width:.9375rem;pointer-events:none;position:absolute;top:0;z-index:3}.neeto-molecules-menu-list__item-btn-count,.neeto-molecules-menu__notif-count{align-items:center;background-color:rgb(var(--neeto-ui-accent-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:flex;flex-shrink:0;font-size:var(--neeto-ui-text-xxs);justify-content:center;padding-inline-end:.25rem;padding-inline-start:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-menu-list__item-btn-count{height:1.125rem;min-width:1.125rem}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper{border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:.75rem!important;min-width:15rem}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper .tippy-content{padding:0}.neeto-ui-dropdown__popup .neeto-molecules-product-switcher-menu-popup-wrapper .tippy-svg-arrow{display:none!important}.neeto-molecules-profile-popup__top-section{border-radius:.25rem;transition:var(--neeto-ui-transition)}.neeto-molecules-profile-popup__top-section:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-menu-sublist__item-btn{font-weight:500!important;height:2.5rem}.neeto-molecules-menu-sublist__item-btn[data-btn-weight=bold]{font-weight:700!important}.neeto-molecules-menu-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-menu-sublist__item-btn-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-menu-sublist__item-btn span{align-items:center;display:flex;gap:.5rem}.neeto-molecules-product-switcher-menu-popup-wrapper{height:95vh;overflow-y:auto;width:calc(100vw - 25rem)}.neeto-molecules-floating-action-button__profile-wrapper-custom-content:hover{background-color:rgb(var(--neeto-ui-white))!important}.neeto-molecules-organization-switcher-active-button,.neeto-molecules-theme-switcher-active-button{color:rgb(var(--neeto-ui-success-600))!important}.tippy-box[data-theme~=neeto-molecules-floating-action-outer-dropdown-wrapper]{--neeto-ui-dropdown-box-shadow:0 0 0 0;--neeto-ui-dropdown-border-radius:0.75rem;--neeto-ui-dropdown-popup-border-radius:0.75rem;--neeto-ui-dropdown-margin-y:0;--neeto-ui-dropdown-margin-x:0;transition:var(--neeto-ui-transition)}.tippy-box[data-theme~=neeto-molecules-floating-action-outer-dropdown-wrapper] .neeto-ui-dropdown__popup{--neeto-ui-dropdown-border-radius:0.75rem;transition:var(--neeto-ui-transition)}.tippy-box[data-theme~=neeto-molecules-floating-action-outer-dropdown-wrapper] .neeto-ui-dropdown__popup .neeto-ui-dropdown__popup-divider{transition:var(--neeto-ui-transition)}.neeto-molecules-subscription-plan-badge{border-radius:9999px;display:inline-block;font-size:.625rem;font-weight:600;line-height:1.1;padding:.25rem .625rem;text-transform:uppercase}.neeto-molecules-subscription-plan-badge--pro{background-color:#ffe44a;color:#000}.neeto-molecules-subscription-plan-badge--free{background-color:rgb(var(--neeto-ui-gray-300));color:rgb(var(--neeto-ui-black))}.neeto-molecules-theme-switcher{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.neeto-molecules-theme-switcher__label{color:rgb(var(--neeto-ui-gray-800));font-size:.875rem;font-weight:500}.neeto-molecules-theme-switcher__segmented-control{background-color:rgb(var(--neeto-ui-gray-200));border-radius:9999px;display:flex;gap:.25rem;padding:.0625rem}.neeto-molecules-theme-switcher__option{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:9999px;color:rgb(var(--neeto-ui-gray-700));cursor:pointer;display:flex;flex:1;font-size:.75rem;font-weight:500;gap:.125rem;padding:.25rem .375rem;transition:all .2s ease;white-space:nowrap}.neeto-molecules-theme-switcher__option:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-molecules-theme-switcher__option--active{background-color:rgb(var(--neeto-ui-white));border-color:rgb(var(--neeto-ui-gray-300));box-shadow:0 1px 2px rgba(0,0,0,.05);color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-theme-switcher__option svg{flex-shrink:0}";
 n(css,{});
 
 var _excluded = ["profileInfoOverrides", "topLinks", "bottomLinks", "showProductSwitcher", "isThemeSwitcherEnabled", "isOrganizationSwitcherEnabled", "customContent", "profilePopoverProps", "isConsumer"];