@commercetools-frontend/application-shell 21.23.10 → 21.24.0

package/dist/use-applications-menu-1925f36a.esm.js

@@ -0,0 +1,172 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { useState, useEffect } from 'react';
+import { useApolloClient } from '@apollo/client';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { u as useMcQuery } from './index-b002eca6.esm.js';
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 823, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
+const defaultApiUrl = window.location.origin;
+
+const mapLabelAllLocalesWithDefaults = (labelAllLocales, defaultLabel) => {
+  let mappedLabelAllLocales = labelAllLocales;
+
+  if (defaultLabel) {
+    // Map all supported locales with the given localized labels.
+    // If a locale is not defined in the config, we use the `default` label as the value.
+    // This is only needed for development as we're trying to map two different schemas.
+    mappedLabelAllLocales = _mapInstanceProperty(supportedLocales).call(supportedLocales, supportedLocale => {
+      const existingField = _findInstanceProperty(labelAllLocales).call(labelAllLocales, field => field.locale === supportedLocale);
+
+      if (existingField) return existingField;
+      return {
+        locale: supportedLocale,
+        value: defaultLabel
+      };
+    });
+  } // Add the `__typename`.
+
+
+  return _mapInstanceProperty(mappedLabelAllLocales).call(mappedLabelAllLocales, field => _objectSpread({
+    __typename: 'LocalizedField'
+  }, field));
+};
+/**
+ * Transform menu links defined in the `custom-application-config.json` to the `FetchApplicationsMenu` schema.
+ * This is only needed for development.
+ */
+
+
+const mapApplicationMenuConfigToGraqhQLQueryResult = applicationConfig => {
+  var _applicationConfig$__, _ref, _applicationConfig$__2, _menuLinks$featureTog, _menuLinks$menuVisibi, _menuLinks$actionRigh, _menuLinks$dataFences, _context;
+
+  const entryPointUriPath = applicationConfig.entryPointUriPath;
+  const menuLinks = (_applicationConfig$__ = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__ === void 0 ? void 0 : _applicationConfig$__.menuLinks; // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+
+  const accountLinks = (_ref = (_applicationConfig$__2 = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__2 === void 0 ? void 0 : _applicationConfig$__2.accountLinks) !== null && _ref !== void 0 ? _ref : [];
+  return {
+    applicationsMenu: {
+      __typename: 'ApplicationsMenu',
+      navBar: menuLinks ? [{
+        __typename: 'NavbarMenu',
+        key: entryPointUriPath,
+        uriPath: entryPointUriPath,
+        icon: menuLinks.icon,
+        labelAllLocales: mapLabelAllLocalesWithDefaults(menuLinks.labelAllLocales, menuLinks.defaultLabel),
+        permissions: menuLinks.permissions,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        featureToggle: (_menuLinks$featureTog = menuLinks.featureToggle) !== null && _menuLinks$featureTog !== void 0 ? _menuLinks$featureTog : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        menuVisibility: (_menuLinks$menuVisibi = menuLinks.menuVisibility) !== null && _menuLinks$menuVisibi !== void 0 ? _menuLinks$menuVisibi : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        actionRights: (_menuLinks$actionRigh = menuLinks.actionRights) !== null && _menuLinks$actionRigh !== void 0 ? _menuLinks$actionRigh : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
+        submenu: _mapInstanceProperty(_context = menuLinks.submenuLinks).call(_context, submenuLink => {
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+
+          return {
+            __typename: 'BaseMenu',
+            key: _concatInstanceProperty(_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
+            labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
+            permissions: submenuLink.permissions,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            featureToggle: (_submenuLink$featureT = submenuLink.featureToggle) !== null && _submenuLink$featureT !== void 0 ? _submenuLink$featureT : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            menuVisibility: (_submenuLink$menuVisi = submenuLink.menuVisibility) !== null && _submenuLink$menuVisi !== void 0 ? _submenuLink$menuVisi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            actionRights: (_submenuLink$actionRi = submenuLink.actionRights) !== null && _submenuLink$actionRi !== void 0 ? _submenuLink$actionRi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            dataFences: (_submenuLink$dataFenc = submenuLink.dataFences) !== null && _submenuLink$dataFenc !== void 0 ? _submenuLink$dataFenc : null
+          };
+        })
+      }] : [],
+      appBar: _mapInstanceProperty(accountLinks).call(accountLinks, menuLink => {
+        var _menuLink$featureTogg;
+
+        return {
+          __typename: 'BaseMenu',
+          key: menuLink.uriPath,
+          uriPath: menuLink.uriPath,
+          labelAllLocales: mapLabelAllLocalesWithDefaults(menuLink.labelAllLocales, menuLink.defaultLabel),
+          permissions: menuLink.permissions,
+          // @ts-ignore: not defined in schema, as it's only used internally.
+          featureToggle: (_menuLink$featureTogg = menuLink.featureToggle) !== null && _menuLink$featureTogg !== void 0 ? _menuLink$featureTogg : null
+        };
+      })
+    }
+  };
+};
+
+function useApplicationsMenu(menuKey, config) {
+  var _config$queryOptions;
+
+  const apolloClient = useApolloClient();
+  const mcProxyApiUrl = useApplicationContext(context => context.environment.mcProxyApiUrl);
+
+  const _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        hasWrittenToCache = _useState2[0],
+        setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  // For local development, we don't fetch data from the remote server but use
+  // only the configuration for the menu links defined for the application.
+  // To do so, we manually write the data in the Apollo cache and use the
+  // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+
+
+  const _useMcQuery = useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
+    onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
+    fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
+    context: {
+      // Allow to overwrite the API url from application config
+      uri: "".concat(mcProxyApiUrl || defaultApiUrl, "/api/graphql"),
+      skipGraphQlTargetCheck: true
+    }
+  }),
+        menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
+  // write it into the Apollo cache.
+
+
+  useEffect(() => {
+    if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
+      const applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
+      apolloClient.writeQuery({
+        query: FetchApplicationsMenu,
+        data: applicationMenu
+      });
+      setHasWrittenToCache(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
+
+  if (menuQueryResult && menuQueryResult.applicationsMenu) {
+    return menuQueryResult.applicationsMenu[menuKey];
+  }
+
+  return;
+}
+
+export { useApplicationsMenu as u };

package/dist/use-applications-menu-7e438b2a.cjs.prod.js

@@ -0,0 +1,188 @@
+'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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var client = require('@apollo/client');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var dist_commercetoolsFrontendApplicationShell = require('./index-e0ab178f.cjs.prod.js');
+
+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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 823, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
+const defaultApiUrl = window.location.origin;
+
+const mapLabelAllLocalesWithDefaults = (labelAllLocales, defaultLabel) => {
+  let mappedLabelAllLocales = labelAllLocales;
+
+  if (defaultLabel) {
+    // Map all supported locales with the given localized labels.
+    // If a locale is not defined in the config, we use the `default` label as the value.
+    // This is only needed for development as we're trying to map two different schemas.
+    mappedLabelAllLocales = _mapInstanceProperty__default["default"](supportedLocales).call(supportedLocales, supportedLocale => {
+      const existingField = _findInstanceProperty__default["default"](labelAllLocales).call(labelAllLocales, field => field.locale === supportedLocale);
+
+      if (existingField) return existingField;
+      return {
+        locale: supportedLocale,
+        value: defaultLabel
+      };
+    });
+  } // Add the `__typename`.
+
+
+  return _mapInstanceProperty__default["default"](mappedLabelAllLocales).call(mappedLabelAllLocales, field => _objectSpread({
+    __typename: 'LocalizedField'
+  }, field));
+};
+/**
+ * Transform menu links defined in the `custom-application-config.json` to the `FetchApplicationsMenu` schema.
+ * This is only needed for development.
+ */
+
+
+const mapApplicationMenuConfigToGraqhQLQueryResult = applicationConfig => {
+  var _applicationConfig$__, _ref, _applicationConfig$__2, _menuLinks$featureTog, _menuLinks$menuVisibi, _menuLinks$actionRigh, _menuLinks$dataFences, _context;
+
+  const entryPointUriPath = applicationConfig.entryPointUriPath;
+  const menuLinks = (_applicationConfig$__ = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__ === void 0 ? void 0 : _applicationConfig$__.menuLinks; // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+
+  const accountLinks = (_ref = (_applicationConfig$__2 = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__2 === void 0 ? void 0 : _applicationConfig$__2.accountLinks) !== null && _ref !== void 0 ? _ref : [];
+  return {
+    applicationsMenu: {
+      __typename: 'ApplicationsMenu',
+      navBar: menuLinks ? [{
+        __typename: 'NavbarMenu',
+        key: entryPointUriPath,
+        uriPath: entryPointUriPath,
+        icon: menuLinks.icon,
+        labelAllLocales: mapLabelAllLocalesWithDefaults(menuLinks.labelAllLocales, menuLinks.defaultLabel),
+        permissions: menuLinks.permissions,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        featureToggle: (_menuLinks$featureTog = menuLinks.featureToggle) !== null && _menuLinks$featureTog !== void 0 ? _menuLinks$featureTog : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        menuVisibility: (_menuLinks$menuVisibi = menuLinks.menuVisibility) !== null && _menuLinks$menuVisibi !== void 0 ? _menuLinks$menuVisibi : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        actionRights: (_menuLinks$actionRigh = menuLinks.actionRights) !== null && _menuLinks$actionRigh !== void 0 ? _menuLinks$actionRigh : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
+        submenu: _mapInstanceProperty__default["default"](_context = menuLinks.submenuLinks).call(_context, submenuLink => {
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+
+          return {
+            __typename: 'BaseMenu',
+            key: _concatInstanceProperty__default["default"](_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
+            labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
+            permissions: submenuLink.permissions,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            featureToggle: (_submenuLink$featureT = submenuLink.featureToggle) !== null && _submenuLink$featureT !== void 0 ? _submenuLink$featureT : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            menuVisibility: (_submenuLink$menuVisi = submenuLink.menuVisibility) !== null && _submenuLink$menuVisi !== void 0 ? _submenuLink$menuVisi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            actionRights: (_submenuLink$actionRi = submenuLink.actionRights) !== null && _submenuLink$actionRi !== void 0 ? _submenuLink$actionRi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            dataFences: (_submenuLink$dataFenc = submenuLink.dataFences) !== null && _submenuLink$dataFenc !== void 0 ? _submenuLink$dataFenc : null
+          };
+        })
+      }] : [],
+      appBar: _mapInstanceProperty__default["default"](accountLinks).call(accountLinks, menuLink => {
+        var _menuLink$featureTogg;
+
+        return {
+          __typename: 'BaseMenu',
+          key: menuLink.uriPath,
+          uriPath: menuLink.uriPath,
+          labelAllLocales: mapLabelAllLocalesWithDefaults(menuLink.labelAllLocales, menuLink.defaultLabel),
+          permissions: menuLink.permissions,
+          // @ts-ignore: not defined in schema, as it's only used internally.
+          featureToggle: (_menuLink$featureTogg = menuLink.featureToggle) !== null && _menuLink$featureTogg !== void 0 ? _menuLink$featureTogg : null
+        };
+      })
+    }
+  };
+};
+
+function useApplicationsMenu(menuKey, config) {
+  var _config$queryOptions;
+
+  const apolloClient = client.useApolloClient();
+  const mcProxyApiUrl = applicationShellConnectors.useApplicationContext(context => context.environment.mcProxyApiUrl);
+
+  const _useState = react.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        hasWrittenToCache = _useState2[0],
+        setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  // For local development, we don't fetch data from the remote server but use
+  // only the configuration for the menu links defined for the application.
+  // To do so, we manually write the data in the Apollo cache and use the
+  // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+
+
+  const _useMcQuery = dist_commercetoolsFrontendApplicationShell.useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
+    onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
+    fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
+    context: {
+      // Allow to overwrite the API url from application config
+      uri: "".concat(mcProxyApiUrl || defaultApiUrl, "/api/graphql"),
+      skipGraphQlTargetCheck: true
+    }
+  }),
+        menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
+  // write it into the Apollo cache.
+
+
+  react.useEffect(() => {
+    if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
+      const applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
+      apolloClient.writeQuery({
+        query: FetchApplicationsMenu,
+        data: applicationMenu
+      });
+      setHasWrittenToCache(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
+
+  if (menuQueryResult && menuQueryResult.applicationsMenu) {
+    return menuQueryResult.applicationsMenu[menuKey];
+  }
+
+  return;
+}
+
+exports.useApplicationsMenu = useApplicationsMenu;

package/dist/use-applications-menu-f6f68bf7.cjs.dev.js

@@ -0,0 +1,188 @@
+'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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var client = require('@apollo/client');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var dist_commercetoolsFrontendApplicationShell = require('./index-5048bf47.cjs.dev.js');
+
+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 _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 823, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
+const defaultApiUrl = window.location.origin;
+
+const mapLabelAllLocalesWithDefaults = (labelAllLocales, defaultLabel) => {
+  let mappedLabelAllLocales = labelAllLocales;
+
+  if (defaultLabel) {
+    // Map all supported locales with the given localized labels.
+    // If a locale is not defined in the config, we use the `default` label as the value.
+    // This is only needed for development as we're trying to map two different schemas.
+    mappedLabelAllLocales = _mapInstanceProperty__default["default"](supportedLocales).call(supportedLocales, supportedLocale => {
+      const existingField = _findInstanceProperty__default["default"](labelAllLocales).call(labelAllLocales, field => field.locale === supportedLocale);
+
+      if (existingField) return existingField;
+      return {
+        locale: supportedLocale,
+        value: defaultLabel
+      };
+    });
+  } // Add the `__typename`.
+
+
+  return _mapInstanceProperty__default["default"](mappedLabelAllLocales).call(mappedLabelAllLocales, field => _objectSpread({
+    __typename: 'LocalizedField'
+  }, field));
+};
+/**
+ * Transform menu links defined in the `custom-application-config.json` to the `FetchApplicationsMenu` schema.
+ * This is only needed for development.
+ */
+
+
+const mapApplicationMenuConfigToGraqhQLQueryResult = applicationConfig => {
+  var _applicationConfig$__, _ref, _applicationConfig$__2, _menuLinks$featureTog, _menuLinks$menuVisibi, _menuLinks$actionRigh, _menuLinks$dataFences, _context;
+
+  const entryPointUriPath = applicationConfig.entryPointUriPath;
+  const menuLinks = (_applicationConfig$__ = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__ === void 0 ? void 0 : _applicationConfig$__.menuLinks; // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+
+  const accountLinks = (_ref = (_applicationConfig$__2 = applicationConfig.__DEVELOPMENT__) === null || _applicationConfig$__2 === void 0 ? void 0 : _applicationConfig$__2.accountLinks) !== null && _ref !== void 0 ? _ref : [];
+  return {
+    applicationsMenu: {
+      __typename: 'ApplicationsMenu',
+      navBar: menuLinks ? [{
+        __typename: 'NavbarMenu',
+        key: entryPointUriPath,
+        uriPath: entryPointUriPath,
+        icon: menuLinks.icon,
+        labelAllLocales: mapLabelAllLocalesWithDefaults(menuLinks.labelAllLocales, menuLinks.defaultLabel),
+        permissions: menuLinks.permissions,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        featureToggle: (_menuLinks$featureTog = menuLinks.featureToggle) !== null && _menuLinks$featureTog !== void 0 ? _menuLinks$featureTog : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        menuVisibility: (_menuLinks$menuVisibi = menuLinks.menuVisibility) !== null && _menuLinks$menuVisibi !== void 0 ? _menuLinks$menuVisibi : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        actionRights: (_menuLinks$actionRigh = menuLinks.actionRights) !== null && _menuLinks$actionRigh !== void 0 ? _menuLinks$actionRigh : null,
+        // @ts-ignore: not defined in schema, as it's only used internally.
+        dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
+        submenu: _mapInstanceProperty__default["default"](_context = menuLinks.submenuLinks).call(_context, submenuLink => {
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+
+          return {
+            __typename: 'BaseMenu',
+            key: _concatInstanceProperty__default["default"](_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
+            labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
+            permissions: submenuLink.permissions,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            featureToggle: (_submenuLink$featureT = submenuLink.featureToggle) !== null && _submenuLink$featureT !== void 0 ? _submenuLink$featureT : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            menuVisibility: (_submenuLink$menuVisi = submenuLink.menuVisibility) !== null && _submenuLink$menuVisi !== void 0 ? _submenuLink$menuVisi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            actionRights: (_submenuLink$actionRi = submenuLink.actionRights) !== null && _submenuLink$actionRi !== void 0 ? _submenuLink$actionRi : null,
+            // @ts-ignore: not defined in schema, as it's only used internally.
+            dataFences: (_submenuLink$dataFenc = submenuLink.dataFences) !== null && _submenuLink$dataFenc !== void 0 ? _submenuLink$dataFenc : null
+          };
+        })
+      }] : [],
+      appBar: _mapInstanceProperty__default["default"](accountLinks).call(accountLinks, menuLink => {
+        var _menuLink$featureTogg;
+
+        return {
+          __typename: 'BaseMenu',
+          key: menuLink.uriPath,
+          uriPath: menuLink.uriPath,
+          labelAllLocales: mapLabelAllLocalesWithDefaults(menuLink.labelAllLocales, menuLink.defaultLabel),
+          permissions: menuLink.permissions,
+          // @ts-ignore: not defined in schema, as it's only used internally.
+          featureToggle: (_menuLink$featureTogg = menuLink.featureToggle) !== null && _menuLink$featureTogg !== void 0 ? _menuLink$featureTogg : null
+        };
+      })
+    }
+  };
+};
+
+function useApplicationsMenu(menuKey, config) {
+  var _config$queryOptions;
+
+  const apolloClient = client.useApolloClient();
+  const mcProxyApiUrl = applicationShellConnectors.useApplicationContext(context => context.environment.mcProxyApiUrl);
+
+  const _useState = react.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        hasWrittenToCache = _useState2[0],
+        setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  // For local development, we don't fetch data from the remote server but use
+  // only the configuration for the menu links defined for the application.
+  // To do so, we manually write the data in the Apollo cache and use the
+  // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+
+
+  const _useMcQuery = dist_commercetoolsFrontendApplicationShell.useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
+    onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
+    fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
+    context: {
+      // Allow to overwrite the API url from application config
+      uri: "".concat(mcProxyApiUrl || defaultApiUrl, "/api/graphql"),
+      skipGraphQlTargetCheck: true
+    }
+  }),
+        menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
+  // write it into the Apollo cache.
+
+
+  react.useEffect(() => {
+    if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
+      const applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
+      apolloClient.writeQuery({
+        query: FetchApplicationsMenu,
+        data: applicationMenu
+      });
+      setHasWrittenToCache(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
+
+  if (menuQueryResult && menuQueryResult.applicationsMenu) {
+    return menuQueryResult.applicationsMenu[menuKey];
+  }
+
+  return;
+}
+
+exports.useApplicationsMenu = useApplicationsMenu;

package/dist/use-is-served-by-proxy-2b4916e5.cjs.dev.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+
+/**
+ * NOTE
+ *    This module wraps `replace` and `reload` from the window's location.
+ *    This mainly helps in tests as we often expect that a reload or
+ *    replace on the location happened.
+ *    In previous code we could just overwrite the properties by:
+ *    `window.location.replace = jest.fn()`
+ *    This will fail in never versions of JSDOM (e.g. v16) as these
+ *    properties are not writable anymore. JSDOM follows the browser standards
+ *    which also state that these should not be writable.
+ *    There are different options to solve this:
+ *      1. Extract those functions as a module an use `jest.mock` to mock them under test
+ *      2. Use `Object.defineProperty` to overwrite the property
+ *         - The community opinion is that this is not preferred and does
+ *           not work in all cases
+ *      3. Delete the property via `delete window.location` to re-create it after
+ *         - This is quite repetiive and noisy in tests and can also remote
+ *           other properties from under location
+ *    Given option 2. and 3. being quite noisy on tests and against working with
+ *    the stndards of the browser we will use 1. Here we only utilise the module
+ *    mocking system of Jest and no other trickery.
+ * */
+const replace = url => window.location.replace(url);
+
+const reload = () => window.location.reload();
+
+const location = {
+  replace,
+  reload
+};
+
+const useIsServedByProxy = () => {
+  const servedByProxy = applicationShellConnectors.useApplicationContext(context => context.environment.servedByProxy);
+  return servedByProxy;
+};
+
+exports.location = location;
+exports.useIsServedByProxy = useIsServedByProxy;