@commercetools-frontend/application-shell 0.0.0-CRAFT-1791-20251006162610

package/dist/user-settings-menu-d75f4958.cjs.prod.js

@@ -0,0 +1,326 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var react = require('react');
+var react$1 = require('@emotion/react');
+var reactBroadcast = require('@flopflip/react-broadcast');
+var Downshift = require('downshift');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var constants = require('@commercetools-frontend/constants');
+var AccessibleHidden = require('@commercetools-uikit/accessible-hidden');
+var Avatar = require('@commercetools-uikit/avatar');
+var designSystem = require('@commercetools-uikit/design-system');
+var Spacings = require('@commercetools-uikit/spacings');
+var Text = require('@commercetools-uikit/text');
+var oidc = require('./oidc-d74e6aa2.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-14a5a1f4.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@apollo/client');
+require('@commercetools-frontend/l10n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
+var AccessibleHidden__default = /*#__PURE__*/_interopDefault(AccessibleHidden);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+var messages = reactIntl.defineMessages({
+  support: {
+    id: 'UserSettingsMenu.support',
+    description: 'The label for Support',
+    defaultMessage: 'Support'
+  },
+  logout: {
+    id: 'UserSettingsMenu.logout',
+    description: 'The label for logout option',
+    defaultMessage: 'Logout'
+  },
+  privacyPolicy: {
+    id: 'UserSettingsMenu.privacyPolicy',
+    description: 'The label for privacy policy option',
+    defaultMessage: 'Privacy Policy'
+  },
+  menuLabel: {
+    id: 'UserSettingsMenu.menuLabel',
+    description: 'The label describing the menu',
+    defaultMessage: 'User settings menu'
+  },
+  openMenuLabel: {
+    id: 'UserSettingsMenu.openMenuLabel',
+    description: 'The label when menu is closed and would be opened by a click',
+    defaultMessage: 'Open user settings menu'
+  },
+  closeMenuLabel: {
+    id: 'UserSettingsMenu.closeMenuLabel',
+    description: 'The label when menu is open and would be closed by a click',
+    defaultMessage: 'Close user settings menu'
+  }
+});
+
+function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const MENU_LABEL_ID = 'user-menu-setting-menu-label';
+const UserAvatar = props => {
+  const _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMouseOver = _useState2[0],
+    setIsMouseOver = _useState2[1];
+  const handleMouseOver = react.useCallback(() => {
+    setIsMouseOver(true);
+  }, []);
+  const handleMouseOut = react.useCallback(() => {
+    setIsMouseOver(false);
+  }, []);
+  return jsxRuntime.jsx("div", {
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
+      alignItems: "center",
+      children: jsxRuntime.jsx(Avatar__default["default"], {
+        size: "m",
+        gravatarHash: props.gravatarHash,
+        firstName: props.firstName,
+        lastName: props.lastName,
+        isHighlighted: isMouseOver,
+        color: "purple"
+      })
+    })
+  });
+};
+UserAvatar.displayName = 'UserAvatar';
+function getIsFocusedElementInMenu() {
+  return Boolean(document.activeElement?.getAttribute('data-user-settings-menu'));
+}
+const stateReducer = (state, changes) => {
+  switch (changes.type) {
+    // So in case the user wants to navigate with the tab button
+    // we need to make sure that the menu does not close
+    case Downshift__default["default"].stateChangeTypes.blurButton:
+      return _objectSpread(_objectSpread({}, changes), {}, {
+        isOpen: (state.isOpen && getIsFocusedElementInMenu()) ?? false
+      });
+    default:
+      return changes;
+  }
+};
+const OptionalFeatureToggle = props => {
+  if (props.featureToggle) {
+    return jsxRuntime.jsx(reactBroadcast.ToggleFeature, {
+      flag: props.featureToggle,
+      children: props.children
+    });
+  }
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+const renderLabel = (menu, applicationLanguage) => {
+  var _context;
+  const localizedLabel = _findInstanceProperty__default["default"](_context = menu.labelAllLocales).call(_context, loc => _startsWithInstanceProperty__default["default"](applicationLanguage).call(applicationLanguage, loc.locale));
+  if (localizedLabel) return localizedLabel.value;
+  return constants.NO_VALUE_FALLBACK;
+};
+const MenuItem = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1al5ftg0"
+} )("width:100%;cursor:pointer;color:", designSystem.designTokens.colorSolid, ";:hover{background-color:", designSystem.designTokens.colorNeutral95, ";}", props => props.hasDivider === true ? /*#__PURE__*/react$1.css("border-bottom:1px solid ", designSystem.designTokens.colorNeutral, ";margin:", designSystem.designTokens.spacing10, " 0;" + ("" ), "" ) : '', ";" + ("" ));
+const MenuItemLabel = props => jsxRuntime.jsx("div", {
+  css: /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+  children: props.children
+});
+const UserSettingsAvatarContainer = props => jsxRuntime.jsx("div", {
+  css: /*#__PURE__*/react$1.css("padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing50, ";" + ("" ), "" ),
+  children: props.children
+});
+const getUserSettingsMenuStyles = () => {
+  return /*#__PURE__*/react$1.css("position:absolute;background:", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius2, ";box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.15);width:", designSystem.designTokens.constraint9, ";right:40px;top:calc(", oidc.DIMENSIONS.header, " + ", designSystem.designTokens.spacing20, ");padding:0 0 ", designSystem.designTokens.spacing10, " 0;overflow:hidden;" + ("" ), "" );
+};
+var _ref2 = {
+  name: "4zleql",
+  styles: "display:block"
+} ;
+const getUserSettingsMenuItemLinkStyles = () => _ref2;
+const UserSettingsMenuBody = props => {
+  var _context2;
+  // Focus on a menu item when it's opened through keyboard
+  const menuElementRef = react.useRef(null);
+  react.useEffect(() => {
+    menuElementRef.current?.focus();
+  }, []);
+  const environment = applicationShellConnectors.useApplicationContext(context => context.environment);
+  const applicationsAppBarMenu = useApplicationsMenu.useApplicationsMenu('appBar', {
+    environment
+  });
+  const accountMenuItems = applicationsAppBarMenu ?? [];
+  return jsxRuntime.jsx("div", {
+    onKeyDown: event => {
+      if (event.key === 'Esc' || event.key === 'Tab' && !getIsFocusedElementInMenu()) {
+        props.downshiftProps.closeMenu();
+      }
+    },
+    css: getUserSettingsMenuStyles(),
+    children: jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, props.downshiftProps.getMenuProps()), {}, {
+      children: [jsxRuntime.jsx(UserSettingsAvatarContainer, {
+        children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: "m",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(Avatar__default["default"], {
+            size: "m",
+            firstName: props.firstName,
+            lastName: props.lastName,
+            gravatarHash: props.gravatarHash,
+            color: "purple"
+          }), jsxRuntime.jsxs("div", {
+            children: [jsxRuntime.jsx(Text__default["default"].Subheadline, {
+              as: "h4",
+              children: _trimInstanceProperty__default["default"](_context2 = [props.firstName, props.lastName].join(' ')).call(_context2)
+            }), jsxRuntime.jsx(Text__default["default"].Detail, {
+              truncate: true,
+              tone: "secondary",
+              children: props.email
+            })]
+          })]
+        })
+      }), accountMenuItems.length > 0 ? jsxRuntime.jsx(MenuItem, {
+        hasDivider: true
+      }) : null, _mapInstanceProperty__default["default"](accountMenuItems).call(accountMenuItems, menu => jsxRuntime.jsx(OptionalFeatureToggle, {
+        featureToggle: menu.featureToggle ?? undefined,
+        children: jsxRuntime.jsx(reactRouterDom.Link, {
+          css: getUserSettingsMenuItemLinkStyles(),
+          to: `/account/${menu.uriPath}`,
+          onClick: () => props.downshiftProps.toggleMenu(),
+          "data-user-settings-menu": true,
+          ref: menuElementRef,
+          children: jsxRuntime.jsx(MenuItem, {
+            children: jsxRuntime.jsx(MenuItemLabel, {
+              children: jsxRuntime.jsx(Text__default["default"].Body, {
+                children: renderLabel(menu, props.language)
+              })
+            })
+          })
+        })
+      }, menu.key)), jsxRuntime.jsx(MenuItem, {
+        hasDivider: true
+      }), jsxRuntime.jsx("a", {
+        css: getUserSettingsMenuItemLinkStyles(),
+        href: `https://commercetools.com/privacy#suppliers`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: () => props.downshiftProps.toggleMenu(),
+        "data-user-settings-menu": true,
+        ref: !applicationsAppBarMenu ? menuElementRef : undefined,
+        children: jsxRuntime.jsx(MenuItem, {
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.privacyPolicy
+            })
+          })
+        })
+      }), jsxRuntime.jsx("a", {
+        css: getUserSettingsMenuItemLinkStyles(),
+        href: constants.SUPPORT_PORTAL_URL,
+        rel: "noopener noreferrer",
+        target: "_blank",
+        onClick: () => props.downshiftProps.toggleMenu(),
+        "data-user-settings-menu": true,
+        children: jsxRuntime.jsx(MenuItem, {
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.support
+            })
+          })
+        })
+      }), jsxRuntime.jsx(MenuItem, {
+        hasDivider: true
+      }), jsxRuntime.jsxs("a", {
+        css: getUserSettingsMenuItemLinkStyles()
+        // NOTE: we want to redirect to a new page so that the
+        // server can remove things like cookie for access token.
+        ,
+        href: `/logout?reason=${constants.LOGOUT_REASONS.USER}`,
+        "data-test": "logout-button",
+        "data-user-settings-menu": true,
+        children: [jsxRuntime.jsx(MenuItem, {
+          children: jsxRuntime.jsx(MenuItemLabel, {
+            children: jsxRuntime.jsx(Text__default["default"].Body, {
+              intlMessage: messages.logout
+            })
+          })
+        }), jsxRuntime.jsx("div", {
+          tabIndex: 0,
+          onFocus: () => props.downshiftProps.closeMenu()
+        })]
+      })]
+    }))
+  });
+};
+UserSettingsMenuBody.displayName = 'UserSettingsMenuBody';
+var _ref = {
+  name: "18rc9yp",
+  styles: "cursor:pointer;border:none;padding:0;display:flex;background:transparent"
+} ;
+const UserSettingsMenu = props => {
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs("div", {
+    "data-test": "user-settings-menu",
+    children: [jsxRuntime.jsx(AccessibleHidden__default["default"], {
+      children: jsxRuntime.jsx("span", {
+        id: MENU_LABEL_ID,
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.menuLabel))
+      })
+    }), jsxRuntime.jsx(Downshift__default["default"], {
+      stateReducer: stateReducer,
+      labelId: MENU_LABEL_ID,
+      children: downshiftProps => jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx("button", _objectSpread(_objectSpread({
+          css: _ref
+        }, downshiftProps.getToggleButtonProps({
+          'aria-label': intl.formatMessage(downshiftProps.isOpen ? messages.closeMenuLabel : messages.openMenuLabel)
+        })), {}, {
+          children: jsxRuntime.jsx(UserAvatar, {
+            firstName: props.firstName,
+            lastName: props.lastName,
+            gravatarHash: props.gravatarHash
+          })
+        })), downshiftProps.isOpen && jsxRuntime.jsx(UserSettingsMenuBody, _objectSpread(_objectSpread({}, props), {}, {
+          downshiftProps: downshiftProps
+        }))]
+      })
+    })]
+  });
+};
+UserSettingsMenu.displayName = 'UserSettingsMenu';
+
+exports.UserAvatar = UserAvatar;
+exports.UserSettingsMenuBody = UserSettingsMenuBody;
+exports["default"] = UserSettingsMenu;