@commercetools-frontend/staff-bar 2.2.1 → 2.2.2

package/dist/{staff-bar-cb3f63e4.cjs.prod.js → staff-bar-b40e3c40.cjs.prod.js}

@@ -28,6 +28,7 @@ var constants = require('@commercetools-frontend/constants');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _bindInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/bind');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var l10n = require('@commercetools-frontend/l10n');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 require('@babel/runtime-corejs3/helpers/classCallCheck');
@@ -150,7 +151,7 @@ const ENV = [{
   group: 'Private'
 }];
 
-var _ref$5 = {
+var _ref$6 = {
   name: "10r8dle",
   styles: "width:206px"
 } ;
@@ -186,7 +187,7 @@ const EnvironmentSwitcher = () => {
     children: [jsxRuntime.jsx(uiKit.Text.Detail, {
       children: "Environment"
     }), jsxRuntime.jsx("div", {
-      css: _ref$5,
+      css: _ref$6,
       children: jsxRuntime.jsx(uiKit.SelectInput, {
         id: 'env-selector',
         name: 'env selector',
@@ -213,9 +214,10 @@ const GITHUB_PR_URL = 'https://github.com/commercetools/merchant-center-frontend
 const FEATURE_FLAG_KEY = 'toggled-feature-flags';
 const ACTIVE_TEAM_ID_KEY = 'activeTeamId';
 const ENABLE_LOG_KEY = 'enable-log';
+const ACTIVE_USER_LANGUAGE_KEY = 'activeUserLanguage';
 const USER_ROLES_WITH_ALLOWED_ACCESS = ['Engineer', 'ProductProjectManagerOrOwner'];
 
-var FetchStaffBarUser = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStaffBarUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 132, source: { body: "query FetchStaffBarUser {\n  user: me {\n    id\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    businessRole\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+var FetchStaffBarUser = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchStaffBarUser" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", alias: { kind: "Name", value: "user" }, name: { kind: "Name", value: "me" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingGroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "launchdarklyTrackingSubgroup" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "businessRole" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "language" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 145, source: { body: "query FetchStaffBarUser {\n  user: me {\n    id\n    launchdarklyTrackingGroup\n    launchdarklyTrackingSubgroup\n    businessRole\n    language\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 const useStaffBarUser = () => {
   const _useMcQuery = applicationShell.useMcQuery(FetchStaffBarUser, {
       context: {
@@ -230,6 +232,7 @@ const useStaffBarUser = () => {
     userId: data?.user?.id,
     isStaffMember: data?.user?.launchdarklyTrackingGroup === 'commercetools' || data?.user?.launchdarklyTrackingGroup === 'mailosaur',
     isDevMember: _includesInstanceProperty__default["default"](USER_ROLES_WITH_ALLOWED_ACCESS).call(USER_ROLES_WITH_ALLOWED_ACCESS, data?.user?.businessRole),
+    userLanguage: data?.user?.language,
     error
   };
 };
@@ -311,12 +314,19 @@ const useTeams = () => {
     data,
     options,
     activeTeamId,
-    isLimitedPermission: storedId && storedId !== adminTeamId,
+    isLimitedPermission: Boolean(storedId) && storedId !== adminTeamId,
     error,
     loading
   };
 };
 
+const useGetLanguagesUser = () => {
+  const userLocale = applicationShellConnectors.useApplicationContext(context => context?.user?.locale);
+  const _useLanguages = l10n.useLanguages(userLocale || ''),
+    data = _useLanguages.data;
+  return data;
+};
+
 const launchdarklyAdapter = window.__flopflip__?.launchdarkly;
 function getFlagValue(flag, defaultValue) {
   // @ts-expect-error: getFlag exists not on all adapters and hence
@@ -344,13 +354,13 @@ const getFromSessionStorage = key => {
 };
 const setToSessionStorage = (key, value) => window.sessionStorage.setItem(key, _JSON$stringify__default["default"](value));
 
-var _ref$4 = {
+var _ref$5 = {
   name: "mdo41b",
   styles: "box-sizing:border-box;width:100%;margin:0;border:0;border-top-width:1px;border-style:solid;border-top-color:var(--color-neutral-90)"
 } ;
 function Divider() {
   return jsxRuntime.jsx("hr", {
-    css: _ref$4
+    css: _ref$5
   });
 }
 
@@ -603,11 +613,11 @@ function GitHubPullRequestLink() {
   });
 }
 
-var _ref$3 = {
+var _ref$4 = {
   name: "1jeqx8",
   styles: "width:242px"
 } ;
-var _ref2$2 = {
+var _ref2$3 = {
   name: "14ronv",
   styles: "z-index:20001;display:flex;align-items:center;margin-right:16px;height:100%"
 } ;
@@ -632,7 +642,7 @@ const TeamSwitcher = () => {
   const portalContainer = document.querySelector("[id='left-of-profile']");
   const container = jsxRuntime.jsx("div", {
     "data-testid": "limited-permission",
-    css: _ref2$2,
+    css: _ref2$3,
     children: jsxRuntime.jsx(uiKit.Stamp, {
       tone: "warning",
       label: "Limited Permission"
@@ -644,7 +654,7 @@ const TeamSwitcher = () => {
       children: [jsxRuntime.jsx(uiKit.Text.Detail, {
         children: "Team"
       }), jsxRuntime.jsx("div", {
-        css: _ref$3,
+        css: _ref$4,
         children: jsxRuntime.jsx(uiKit.SelectInput, {
           id: "team-selector",
           name: "Team Selector",
@@ -736,11 +746,11 @@ function getDurationBetween(type, deployedAt) {
   }
   return Math.round(Math.abs(+deployedDate - +today) / value);
 }
-var _ref$2 = {
+var _ref$3 = {
   name: "1nxezmo",
   styles: "cursor:pointer!important;position:absolute;left:0;width:100%;button{width:100%;opacity:0;}"
 } ;
-var _ref2$1 = {
+var _ref2$2 = {
   name: "bjn8wh",
   styles: "position:relative"
 } ;
@@ -832,11 +842,11 @@ const DeploymentTracker = () => {
   };
   if (!versions?.length) return null;
   return jsxRuntime.jsxs("div", {
-    css: _ref2$1,
+    css: _ref2$2,
     children: [jsxRuntime.jsxs(uiKit.Stamp, {
       tone: getTone(getLastUpdate(currentApplication)),
       children: ["Last deployed: ", getLastUpdate(currentApplication).text, jsxRuntime.jsx("div", {
-        css: _ref$2,
+        css: _ref$3,
         children: jsxRuntime.jsx(uiKit.SecondaryButton, {
           label: "",
           onClick: openModal,
@@ -867,14 +877,14 @@ const DeploymentTracker = () => {
   });
 };
 
-var _ref$1 = {
+var _ref$2 = {
   name: "tkfx1x",
   styles: ">button{margin-right:27px!important;}"
 } ;
 function StaffBarInfo() {
   const infoModalState = applicationComponents.useModalState();
   return jsxRuntime.jsxs("div", {
-    css: _ref$1,
+    css: _ref$2,
     children: [jsxRuntime.jsx(uiKit.IconButton, {
       size: "30",
       label: "",
@@ -896,6 +906,87 @@ function StaffBarInfo() {
   });
 }
 
+const getActiveUserLanguage = () => window.sessionStorage.getItem(ACTIVE_USER_LANGUAGE_KEY);
+const setActiveUserLanguage = language => window.sessionStorage.setItem(ACTIVE_USER_LANGUAGE_KEY, language);
+const removeActiveUserLanguage = () => window.sessionStorage.removeItem(ACTIVE_USER_LANGUAGE_KEY);
+
+var _ref$1 = {
+  name: "1jeqx8",
+  styles: "width:242px"
+} ;
+var _ref2$1 = {
+  name: "14ronv",
+  styles: "z-index:20001;display:flex;align-items:center;margin-right:16px;height:100%"
+} ;
+const LanguageSwitcher = () => {
+  var _context;
+  const userLanguages = useGetLanguagesUser();
+  const _useStaffBarUser = useStaffBarUser(),
+    userDefaultLanguage = _useStaffBarUser.userLanguage;
+  const activeLanguage = getActiveUserLanguage() || userDefaultLanguage;
+  if (!userLanguages) {
+    return null;
+  }
+  const handleLanguageChange = (event, defaultLanguage) => {
+    const value = event.target.value;
+    if (value && typeof value === 'string') {
+      // If selected language matches the default from BE, remove from sessionStorage
+      // Otherwise, save the user's preference
+      if (value === defaultLanguage) {
+        removeActiveUserLanguage();
+      } else {
+        setActiveUserLanguage(value);
+      }
+    } else {
+      removeActiveUserLanguage();
+    }
+    window.location.reload();
+  };
+  const options = [{
+    options: _mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](userLanguages || {})).call(_context, _ref3 => {
+      let _ref4 = _slicedToArray(_ref3, 2),
+        locale = _ref4[0],
+        info = _ref4[1];
+      return {
+        value: locale,
+        label: info.country ? `${info.language} (${info.country}) (${locale})` : `${info.language} (${locale})`
+      };
+    })
+  }];
+  const isLanguageOverwritten = activeLanguage !== userDefaultLanguage;
+  const portalContainer = document.querySelector("[id='left-of-profile']");
+  const container = jsxRuntime.jsx("div", {
+    "data-testid": "limited-permission",
+    css: _ref2$1,
+    children: jsxRuntime.jsx(uiKit.Stamp, {
+      tone: "warning",
+      label: "User language overwritten"
+    })
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+      alignItems: "center",
+      children: [jsxRuntime.jsx(uiKit.Text.Detail, {
+        children: "User Language"
+      }), jsxRuntime.jsx("div", {
+        css: _ref$1,
+        children: jsxRuntime.jsx(uiKit.SelectInput, {
+          id: "language-selector",
+          name: "Language Selector",
+          isSearchable: true,
+          horizontalConstraint: 5,
+          menuPortalTarget: document.body,
+          menuPortalZIndex: 30000,
+          onChange: event => handleLanguageChange(event, userDefaultLanguage),
+          value: activeLanguage,
+          options: options,
+          showOptionGroupDivider: true
+        })
+      })]
+    }), isLanguageOverwritten && portalContainer && /*#__PURE__*/ReactDOM__default["default"].createPortal(container, portalContainer)]
+  });
+};
+
 var _ref = {
   name: "16u25pc",
   styles: "position:absolute;height:24px;width:56px;background:var(--color-accent-10);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);border-radius:0px 0px 4px 4px;left:calc(50% - 23px);bottom:-23px;cursor:pointer;z-index:30000;display:flex;align-items:center;justify-content:center;:hover{background:var(--color-accent-20);}"
@@ -939,7 +1030,7 @@ function StaffBar(props) {
             scale: "l",
             children: [jsxRuntime.jsx(GitHubPullRequestLink, {}), jsxRuntime.jsx(FeatureFlagToggler, {
               featureFlags: props.featureFlags
-            }), jsxRuntime.jsx(EnvironmentSwitcher, {}), jsxRuntime.jsx(TeamSwitcher, {})]
+            }), jsxRuntime.jsx(EnvironmentSwitcher, {}), jsxRuntime.jsx(TeamSwitcher, {}), jsxRuntime.jsx(LanguageSwitcher, {})]
           }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
             scale: "l",
             alignItems: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/staff-bar",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Toolbar that makes testing inside Merchant Center easier",
   "license": "MIT",
   "main": "dist/commercetools-frontend-staff-bar.cjs.js",
@@ -16,33 +16,38 @@
     "@apollo/client": "3.12.4",
     "@babel/core": "^7.22.11",
     "@babel/runtime-corejs3": "^7.21.0",
-    "@commercetools-frontend/application-components": "24.7.2",
-    "@commercetools-frontend/application-shell": "24.7.2",
-    "@commercetools-frontend/ui-kit": "20.2.3",
+    "@commercetools-frontend/l10n": "24.11.0",
+    "@commercetools-frontend/ui-kit": "20.3.0",
     "@flopflip/types": "14.0.1",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-dom": "19.2.0",
-    "react-router-dom": "5.3.4",
     "typescript": "5.2.2"
   },
   "devDependencies": {
-    "@commercetools-frontend/application-shell-connectors": "24.7.2",
-    "@commercetools-frontend/constants": "24.7.2",
+    "@commercetools-frontend/application-components": "24.11.0",
+    "@commercetools-frontend/application-shell": "24.11.0",
+    "@commercetools-frontend/application-shell-connectors": "24.11.0",
+    "@commercetools-frontend/constants": "24.11.0",
     "@emotion/react": "11.14.0",
     "@manypkg/find-root": "2.2.3",
-    "@types/react": "19.2.0",
+    "@types/react": "19.2.2",
     "@types/react-dom": "19.1.9",
     "@types/react-router-dom": "5.3.3",
     "prettier": "2.8.8",
     "rcfile": "1.0.3",
-    "react": "19.2.0"
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-router-dom": "5.3.4"
   },
   "peerDependencies": {
+    "@commercetools-frontend/application-components": "24.x",
+    "@commercetools-frontend/application-shell": "24.x",
     "@commercetools-frontend/application-shell-connectors": "24.x",
     "@commercetools-frontend/constants": "24.x",
     "@emotion/react": "11.x",
-    "react": "19.x"
+    "react": "19.x",
+    "react-dom": "19.x",
+    "react-router-dom": "5.x"
   },
   "publishConfig": {
     "access": "public"